JS - удалить тег без удаления контента

Question

Мне интересно, можно ли удалить тег, но оставить содержимое в такте? Например, возможно ли удалить тег SPAN, но оставить там содержимое SPAN?

<p>The weather is sure <span>sunny</span> today</p> //original

<p>The weather is sure sunny today</p> //turn it into this

Я пытался использовать этот метод использования replaceWith(), но он превратил HTML в

<p>
  "The weather is sure " 
  "sunny"
  " today"
</p>

РЕДАКТИРОВАТЬ: После проверки всех ваших ответов, я понял, что мой код виноват. Причина, по которой я продолжаю получать три разделенных текстовых узла, заключается в вставке тега SPAN. Я создам еще один вопрос, чтобы попытаться исправить мою проблему.

Answer 1

У jQuery есть более простые способы:

var spans = $('span');
spans.contents().unwrap();

С помощью различных методов выбора можно удалить глубоко вложенные участки или просто направить дочерние участки элемента.

Answer 2

<p>The weather is sure <span>sunny</span> today</p>;


var span=document.getElementsByTagName('span')[0]; // get the span
var pa=span.parentNode;
while(span.firstChild) pa.insertBefore(span.firstChild, span);

pa.removeChild(span);

Answer 3

Есть несколько способов сделать это. Jquery - самый простой способ:

//grab and store inner span html
var content = $('p span').html;
//"Re"set inner p html
$('p').html(content);

Javascript может сделать то же самое, используя element.replace. (Я не помню, чтобы регулярное выражение выполняло замену одним движением, но это простой способ)

paragraphElement.replace("<span>", "");
paragraphElement.replace("</span>", "");

Answer 4

$(function(){

   var newLbl=$("p").clone().find("span").remove().end().html();
    alert(newLbl);

});​

Пример: http://jsfiddle.net/7gWdM/6/

Answer 5

Это просто три текстовых узла вместо одного. Это не имеет видимого значения, не так ли?

Если это проблема, используйте DOM normalize Способ их объединения:

$(...)[0].normalize();

Answer 6

Если кто-то все еще ищет это, полное решение, которое сработало для меня:

Предполагая, что мы имеем:

<p>hello this is the <span class="highlight">text to unwrap</span></p>

JS это:

// get the parent
var parentElem = $(".highlight").parent(); 

// replacing with the same contents
$(".highlight").replaceWith( 
    function() { 
        return $(this).contents();
    }
);

// normalize parent to strip extra text nodes
parentElem.each(function(element,index){
    $(this)[0].normalize();
});

Answer 7

Если это единственный дочерний промежуток внутри родителя, вы можете сделать что-то вроде этого:

HTML:

<p class="parent">The weather is sure <span>sunny</span> today</p>;

JavaScript:

parent = document.querySelector('.parent');
parent.innerHTML = parent.innerText;

Так что просто замените HTML элемента на его текст.

Answer 8

Если вы не ищете решение jQuery, вот что-то более легкое и сфокусированное на вашем сценарии.

Я создал функцию под названием getText() и я использовал это рекурсивно. Короче говоря, вы можете получить дочерние узлы вашего p элемент и получить все текстовые узлы в этом p узел.

Почти все в DOM является своего рода узлом. Глядя на следующие ссылки, я обнаружил, что текстовые узлы имеют числовой nodeType значение 3, и когда вы определяете, где находятся ваши текстовые узлы, вы получаете их nodeValueи вернуть его для конкатенации со всем значением, не содержащим текстовых узлов.

https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nodeValue

var para = document.getElementById('p1')  // get your paragraphe 
var texttext = getText(para);             // pass the paragraph to the function
para.innerHTML = texttext                 // set the paragraph with the new text

function getText(pNode) {

    if (pNode.nodeType == 3) return pNode.nodeValue;

    var pNodes = pNode.childNodes        // get the child nodes of the passed element
    var nLen = pNodes.length             // count how many there are
    var text = "";

    for (var idx=0; idx < nLen; idx++) {   // loop through the child nodes
        if (pNodes[idx].nodeType != 3 ) {  // if the child not isn't a text node
            text += getText(pNodes[idx]);  // pass it to the function again and 
                                           // concatenate it's value to your text string  
        } else {
            text += pNodes[idx].nodeValue  // otherwise concatenate the value of the text
                                           // to the entire text
        }

    }

    return text
}

Я не проверял это для всех сценариев, но он подойдет для того, что вы делаете в данный момент. Это немного сложнее, чем строка замены, так как вы ищете текстовый узел, а не жесткое кодирование для удаления определенных тегов.

Удачи.

Answer 9

Вы можете удалить spanэлемент и сохраните содержимое HTML или внутренний текст без изменений. С помощью метода unwrap () jQuery .

Здесь вы можете увидеть пример: Как удалить тег без удаления его содержимого с помощью jQuery