JS - удалить тег без удаления содержимого

Мне интересно, можно ли удалить тег, но оставить контент в такт? Например, можно ли удалить тег 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>

EDIT: после тестирования всех ваших ответов я понял, что мой код виноват. Причина, по которой я продолжаю получать три разделенных текстовых узла, связана с вставкой тега SPAN. Я создам еще один вопрос, чтобы попытаться исправить мою проблему.

Ответ 1

jQuery имеет более простые способы:

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

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

Ответ 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);

Ответ 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>", "");

Ответ 4

Это всего лишь три текстовых узла вместо одного. Это не делает видимой разницы?

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

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

Ответ 5

$(function(){

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

});

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

Ответ 6

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

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

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

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 value to your text string  
        } else {
            text += pNodes[idx].nodeValue  // otherwise concatenate the value of the text
                                           // to the entire text
        }

    }

    return text
}

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

Удачи.

Ответ 7

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

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

<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();
});