删除 HTML 标记，但保留 innerHtml

我有一些简单的 HTML，我需要剥夺简单的格式。

A nice house was found in <b>Toronto</b>.

我需要删除粗体，但保留完整的句子。

这在 jQuery 中是如何实现的？

120475 次浏览
小开
最佳答案 
$('b').contents().unwrap();

这样选择所有 <b>元素，然后 使用 .contents()针对 <b>的文本内容，然后是 .unwrap()去掉其父 <b>元素。

为了最好的表演，永远要本土化:

var b = document.getElementsByTagName('b');


while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}

这比这里提供的任何 jQuery 解决方案都要快得多。

小开

你也可以像这样使用 .replaceWith():

$("b").replaceWith(function() { return $(this).contents(); });

或者，如果你知道它只是一个字符串:

$("b").replaceWith(function() { return this.innerHTML; });

如果要展开很多元素，这可能会产生很大的不同，因为上面的两种方法都是 要快得多，而不是 .unwrap()的成本。

小开

删除内部 html 元素并只返回文本的最简单方法是 Text ()函数。

例如:

var text = $('<p>A nice house was found in <b>Toronto</b></p>');


alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>


alert( text.text() );
////Outputs A nice house was found in Toronto

小提琴演示

小开

另一种原生的解决方法(在咖啡中) :

el = document.getElementsByTagName 'b'


docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length


el.parentNode.replaceChild docFrag, el

我不知道它是否比 user113716的解决方案更快，但对某些人来说可能更容易理解。

小开

这个怎么样？

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

第一行将 b标记的 HTML 内容直接复制到 b标记之后的位置，然后第二行从 DOM 中删除 b标记，只保留其复制的内容。

我通常将它包装成一个函数，以使其更容易使用:

function removeElementTags(element) {
element.insertAdjacentHTML("afterend",element.innerHTML);
element.parentNode.removeChild(element);
}

所有的代码实际上都是纯粹的 Javascript，唯一使用的 JQuery 是用来选择要定位的元素(第一个示例中的 b标记)。函数是纯 JS: D

再看看:

小开 
// For MSIE:
el.removeNode(false);


// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
if (el.parentElement) {
if (el.childNodes.length) {
var range = document.createRange();
range.selectNodeContents(el);
el.parentNode.replaceChild(range.extractContents(), el);
} else {
el.parentNode.removeChild(el);
}
}
}


// Modern es:
const replaceWithContents = (el) => {
el.replaceWith(...el.childNodes);
};


// or just:
el.replaceWith(...el.childNodes);


// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
if (el.parentElement) {
if (el.childNodes.length) {
const range = document.createRange();
range.selectNodeContents(el);
el.replaceWith(range.extractContents());
} else {
el.remove();
}
}
};
小开

看吧，最简单的答案就是震撼人心:

OuterHTML 被支持到 < strong > Internet Explorer 4！

下面是用 javascript 即使没有 jQuery 完成的

element.outerHTML = element.innerHTML

与 JQuery

var element = $('b')[0];
element.outerHTML = element.innerHTML;

或者没有 jQuery

var element = document.querySelector('b');
element.outerHTML = element.innerHTML

如果你想把它作为一个函数:

function unwrap(selector) {
var nodelist = document.querySelectorAll(selector);
Array.prototype.forEach.call(nodelist, function(item,i){
item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags
})
}


unwrap('b')

这应该在所有主要的浏览器，包括旧的 IE 工作。

如果得到 不修改允许错误或 例外，则表示该元素没有父元素。通常，在尝试这个答案时，您可以从 javascript 控制台创建一个新节点，而不将其作为其他元素的子节点。但是不要担心，并且记住文档中的任何元素都至少有一个父元素(<html></html>元素)

注意:

这将重写 innerHTML，因此如果有一个引用内部元素的变量，它将不会指向同一个元素。

如果需要在编码中保留一些内部元素的引用，可以使用 jQuery (顶部答案)将元素移动到预期的位置，而无需重写元素。


提交答案