JS - 不删除内容

我想知道是否可以删除标签，但留下的机智内容删除标签？例如，是否可以删除SPAN标签但将SPAN的内容留在那里？JS - 不删除内容

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

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

我一直在使用使用replaceWith（）的this方法试过了，但它变成HTML到

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

编辑：测试你的答案后，我意识到，我的代码有过错。我不断收到三个分割文本节点的原因是由于插入了SPAN标签。我会创建另一个问题来解决我的问题。

来源

2012-03-24 Jon

$（”内容（）。unwrap（） [1]：http://stackoverflow.com/questions/2308366/remove-element-with-jquery-but-leave-text – 2012-03-24 01:56:28

如何使用innerHtml？它是否给出相同的结果？ – 2012-03-24 02:00:29

可能的重复[如何使用jQuery解开文本？]（http://stackoverflow.com/questions/2409117/how-to-unwrap-text-using-jquery） – Joseph 2012-03-24 02:00:31

jQuery有更简单的方法：

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

有了不同的选择方法，有可能去除嵌套的深度跨度或者直接引导子元素的跨度。

来源

2012-03-24 02:17:41 user1106995

这只是三个文本节点，而不是一个。它不会产生明显的不同吗？

如果这是一个问题，使用DOM normalize方法把它们混合起来：

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

来源

2012-03-24 01:56:26

是的，它对我的目的有所不同。我正在存储原始的DOM结构。使用replaceWith（）稍微改变DOM结构，所以我的代码现在崩溃:( – Jon 2012-03-24 01:57:41

$(function(){ 

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

});

例子：http://jsfiddle.net/7gWdM/6/

来源

2012-03-24 02:00:41 Shyju

有几种方法可以做到这一点。 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>", "");

来源

2012-03-24 02:03:45

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

来源

2012-03-24 02:22:05 kennebec

如果你不是在寻找一个jQuery解决方案，这里有一些轻量级的东西，专注于你的场景。

我创建了一个名为getText()功能，我用它递归。总之，你可以得到你p元素的子节点和检索p节点中的所有文本节点。

只是在DOM的一切都是某种类型的节点。在下面的链接我抬头发现，文本节点有3数值nodeType值，当您发现您的文本节点，你会得到他们的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 
}

我还没有适合所有情况的测试，这一点，但它会为你此刻在做什么。它比替换字符串稍复杂一点，因为您正在查找文本节点，而不是硬编码以删除特定的标记。

祝你好运。

来源

2012-03-24 03:00:50 dmbania

如果有人还在寻找那个，那个为我工作过的完整的解决方案是：

假设我们有：

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

来源

2013-11-14 17:17:30 Andrea

JS - 不删除内容

回答

相关问题