删除 HTML 标记但保留 innerHtml答案

【问题标题】：Remove a HTML tag but keep the innerHtml删除 HTML 标记但保留 innerHtml
【发布时间】：2011-05-13 02:08:29
【问题描述】：

我有一些简单的 HTML，需要去除简单的格式。

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

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

在 jQuery 中这怎么可能？

【问题讨论】：

标签： jquery

【解决方案1】：

$('b').contents().unwrap();

这会选择所有<b> 元素，然后选择uses .contents() 以定位<b> 的文本内容，then .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 解决方案快得多。

【讨论】：

+1 我坐在那里写了一个关于unwrap() 的几乎相同的答案，不记得如何获取文本部分，忘记了.contents() - 非常好。
虽然这可行，但与 .replacewith() 相比，它也相当慢，因为额外的 DOM 遍历......如果它是一个只有 HTML 的 <b> 标记，它会变得更快。
另外，如果你只想解开特定的跨度或字体标签，你可以这样做： $(".className font").contents().unwrap();
如果 html 是
abc
abc 断线不成立？如果使用
作为换行符，我怎么能持有它？ @user113716
谢谢，这很有帮助。我在parent.removeChild(... 之后添加了parent.normalize() 以合并相邻的文本节点。如果您不断修改页面，这将很有帮助。

【解决方案2】：

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

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

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

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

如果您要解包很多元素，这可能会产生很大的不同，因为上述任何一种方法的成本都是significantly faster，而不是.unwrap()。

【讨论】：

尼克，我也很喜欢你的回答。我选择了另一个，因为我将在我的 iPad 应用程序（本地数据）中使用它的标签/文本数量很少，因此性能不太重要。 Partick 的回答对我来说更容易维护。在 2 个很好的解决方案上分裂头发，但我只能给一个检查。
@BahaiResearch.com - 如果性能不是问题，那么绝对要简单...我只是为其他人提供它，以便以后发现它可能会担心它:)
我试图将这个示例与文本框一起使用，但它让我很生气，因为里面的内容是我想要评估的 html 标签，而不仅仅是显示为文本。我最终使用： $('textarea').replaceWith(function(){return $(this).val();});

【解决方案3】：

删除内部 html 元素并仅返回文本的最简单方法是 JQuery .text() function。

例子：

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

jsFiddle Demo

【讨论】：

【解决方案4】：

看，最简单的答案令人震惊：

outerHTML 支持 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。

如果你得到 NoModificationAllowedError 或 DOMException，则表示该元素没有父元素。通常，当您通过从 javascript 控制台创建一个新节点而不将其作为其他元素的子节点来尝试此答案时，您会得到这个。但别担心，请记住，文档中的任何元素都至少有一个父元素（<html></html> 元素）

注意：

这重写了innerHTML，所以如果你有一个引用内部元素的变量，它就不会指向同一个元素。

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

【讨论】：

在 Safari 中不起作用：“NoModificationAllowedError：无法修改对象。”
我刚刚尝试了我的 safari，它可以工作。您可以使用 safari 在此 stackoverflow 页面上的任何元素上尝试它。但是，如果您创建一个元素并且该元素尚未包含在任何其他元素中，则在操作此元素时您将收到 NoModificationAllowedError。如果您将该元素放在另一个元素中，即使两个元素都不在中/不在 DOM 中，这仍然可以正常工作。
NoModificationAllowedError 当您尝试在像document.documentElement 这样的元素上设置outerHTML 时发生，其中元素的父级是Document 本身。 DOMException 当字符串不是有效的 HTML 时出现。见the working draft recommendation。
这不会创建新元素而不是保留旧元素吗？例如，如果我持有内容中某些元素的引用...
@izzulmakin 这是我的小提琴：jsfiddle.net/ebfpqn40我在 Firefox 93 上测试过，它会提醒 false。

【解决方案5】：

这个怎么样？

$("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

另请看：

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

另一种原生解决方案（在咖啡中）：

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

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

【讨论】：