JS – 删除标记而不删除内容
我想知道是否可以删除标签但是保留内容？ 例如，是否可以删除SPAN标记但是在那里留下SPAN的内容？
The weather is sure sunny today
//original The weather is sure sunny today
//turn it into this我尝试过使用这种使用replaceWith（）的方法，但它将HTML转换为
"The weather is sure " "sunny" " today"
编辑：在测试了所有答案之后，我意识到我的代码有问题。 我不断获得三个分割文本节点的原因是由于插入了SPAN标记。 我将创建另一个问题来尝试解决我的问题。
jQuery有更简单的方法：
var spans = $('span'); spans.contents().unwrap();
使用不同的选择器方法，可以删除深层嵌套的跨距或仅指向元素的子跨度。
The weather is sure sunny today
; var span=document.getElementsByTagName('span')[0]; // get the span var pa=span.parentNode; while(span.firstChild) pa.insertBefore(span.firstChild, span); pa.removeChild(span);
有几种方法可以做到这一点。 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("", ""); paragraphElement.replace("", "");
它只是三个文本节点而不是一个。 它没有明显的区别吗？
如果这是一个问题，请使用DOM normalize方法将它们组合在一起：
$(...)[0].normalize();
$(function(){ var newLbl=$("p").clone().find("span").remove().end().html(); alert(newLbl); });
示例： http ： //jsfiddle.net/7gWdM/6/
如果你不是在寻找一个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 }
我没有针对所有情况对此进行测试，但它会对您目前正在做的事情进行测试。 它比替换字符串稍微复杂一些，因为您正在寻找文本节点而不是硬编码来删除特定标记。
祝好运。
如果有人仍在寻找，那么对我有用的完整解决方案是：
假设我们有：
hello this is the text to unwrap
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(); });
如果它是父级内唯一的子级跨度，则可以执行以下操作：
HTML：
The weather is sure sunny today
;
JavaScript的：
parent = document.querySelector('.parent'); parent.innerHTML = parent.innerText;
所以只需用它的文本替换元素的HTML。