Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Удалить тег без удаления содержимого (https://javascript.ru/forum/dom-window/17283-udalit-teg-bez-udaleniya-soderzhimogo.html)

DZHETIGAPA 13.05.2011 01:00

Удалить тег без удаления содержимого
 
Как можно удалить тег, не удаляя его содержимое, на js или jquery. Если всего один тег внутри родителя, то удалить легко, а если их много и нужно удалить конкретный тег, то тут сложнее.

Может регулярные выражения использовать?

Кто сможет подсказать или хотя бы навести на мысль?

DZHETIGAPA 13.05.2011 01:14

Спасибо! Уже сам решил проблему!

xmapact 19.05.2011 21:29

Вложений: 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>Попробуем удалить тег  &lt;b&gt; в одном из елементов списка. Рассмотрим два примера в которых нужно удалить тег:</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");
};

Matre 20.05.2011 09:18

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, время: 13:19.