Удалить тег без удаления содержимого
Как можно удалить тег, не удаляя его содержимое, на js или jquery. Если всего один тег внутри родителя, то удалить легко, а если их много и нужно удалить конкретный тег, то тут сложнее.
Может регулярные выражения использовать? Кто сможет подсказать или хотя бы навести на мысль? |
Спасибо! Уже сам решил проблему!
|
Вложений: 1
Раз уж тема создана попробую привести пару примеров. Если есть ошибки, пожалуйста, критикуйте.
Дпустим есть HTML страница, где есть немного текста и много тегов без указания классов или ID. Для наглядности попробую удалить тег <b>.
<html lang="en">
<head>
<title>delTag</title>
</head>
<body>
<script type="text/javascript" src="delTag.js"></script>
<div id="article">
<h1>Удалить тег не удаляя содержимое, ага, давай!</h1>
<ol>
<li><p><b>Спасибо! Уже сам решил проблему!</b></p>
<li><p><b>Thank you! Already solved the problem myself!</b></p>
<li><p><b>Дзякуй! Ужо сам вырашыў праблему!</b></p>
<li><p><b>Merci! Déjà résolu le problème moi-même!</b></p>
</ol>
<p>Попробуем удалить тег <b> в одном из елементов списка. Рассмотрим два примера в которых нужно удалить тег:</p>
<ol>
<li><p>Удалить тег в третьем по счету элементе списка.</p><button onclick="thirdIsDown()" id="thirdIsDown">Удалить</button>
<li><p>Удалить тег в строке в которой встречается слово "solved".</p><button onclick="solvedIsDown()" id="solvedIsDown">Удалить</button>
</ol>
</div>
</body>
</html>
Содержимое delTag.js:
function thirdIsDown(){
var placeToFindVictim = document.getElementsByTagName("li")[2];
function resqueText(node){
for (i = node.firstChild; i != null; i = node.nextSibling){
if (i.nodeType == 1)
return resqueText(i);
if (i.nodeType == 3){
var b = i.parentNode;
b.parentNode.replaceChild(i, b);
return null;
}
}
return null;
};
resqueText(placeToFindVictim);
killAction("thirdIsDown");
};
function solvedIsDown(){
var placeToFindVictim = document.getElementsByTagName("li");
for (i = 0; i < placeToFindVictim.length; i++){
killAllMatchingTextNodes(placeToFindVictim[i]);
}
function killAllMatchingTextNodes(node){
for (i = node.firstChild; i != null; i = node.nextSibling){
if (i.nodeType == 1)
return killAllMatchingTextNodes(i);
if (i.nodeType == 3){
var pattern = /solved/;
if (pattern.test(i.data)){
var b = i.parentNode;
b.parentNode.replaceChild(i, b);
return null;
}
}
}
return null;
}
killAction("solvedIsDown");
};
function killAction(targetId){
targetId = document.getElementById(targetId);
targetId.removeAttribute("onclick");
};
|
xmapact, может, я не так понял задачу, но всё делается на раз проще:
<html>
<body>
<b><i>обычный <u>подчеркнутый</u></i></b>
<input type='button' onclick='remove(document.getElementsByTagName("B")[0])' value='удалить bold' />
<input type='button' onclick='remove(document.getElementsByTagName("I")[0])' value='удалить italic' />
<script type='text/javascript'>
function remove(element) {
var parent = element.parentNode;
while (element.firstChild)
parent.insertBefore(element.firstChild, element);
parent.removeChild(element);
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:30. |