给定一串html，在javascript中仅去除锚HTML标签的最佳方法是什么？答案

【问题标题】：What's the best way to strip out only the anchor HTML tags in javascript, given a string of html?给定一串html，在javascript中仅去除锚HTML标签的最佳方法是什么？
【发布时间】：2010-12-27 02:39:22
【问题描述】：

假设有一个 HTML 字符串，带有脚本标签、纯文本等等。

只去除<a> 标签的最佳方法是什么？

我在这里使用了一些方法，但这些方法适用于所有标签。 Strip HTML from Text JavaScript

【问题讨论】：

要保留标签的内容吗？

标签： javascript jquery html parsing text

【解决方案1】：

使用 jQuery：

var content = $('<div>' + htmlString + '</div>');
content.find('a').replaceWith(function() { return this.childNodes; });
var newHtml = content.html();

添加一个包装 <div> 标记可以让我们返回所需的 HTML。

我在博客上写了more detailed explanation。

【讨论】：

这可能会导致意外的副作用，例如破坏附加到任何被触摸元素的事件处理程序。
@eyelidlessness：他有一个字符串。没有任何事件处理程序。如果他没有一根绳子，固定的。
@SLaks，感谢您指出这一点，我错过了。我确实在另一个答案中提供了另一种方法，以防有人试图在 DOM 结构中完成同样的事情。
@eyelidlessness：我想我已经解决了这个问题。 .contents() 返回实际的 DOM 元素，因此应保留处理程序。（懒得查了）
@SLaks，我错过了。干杯（+1）。

【解决方案2】：

这种方法将保留现有的 DOM 节点，如果锚点中的元素附加了事件，则可以最大限度地减少副作用。

function unwrapAnchors() {
    if(!('tagName' in this) || this.tagName.toLowerCase() != 'a' || !('parentNode' in this)) {
        return;
    }
    var childNodes = this.childNodes || [], children = [], child;
    // Convert childNodes collection to array
    for(var i = 0, childNodes = this.childNodes || []; i < childNodes.length; i++) {
        children[i] = childNodes[i];
    }
    // Move children outside element
    for(i = 0; i < children.length; i++) {
        child = children[i];
        if(('tagName' in child) && child.tagName.toLowerCase() == 'a') {
            child.parentNode.removeChild(child);
        } else {
            this.parentNode.insertBefore(child, this);
        }
    }
    // Remove now-empty anchor
    this.parentNode.removeChild(this);
}

使用（使用 jQuery）：

$('a').each(unwrapAnchors);

使用（不带 jQuery）：

var a = document.getElementsByTagName('a');
while(a.length) {
    unwrapAnchors.call(a[a.length - 1]);
}

【讨论】：

var elem = arguments[0] || this
@SLaks，与 jQuery 一起使用，el 将是迭代器。

【解决方案3】：

一个标签不应该包含任何其他标签，所以一个简单的不贪婪的正则表达式就可以解决问题（即string.match(/<a>(.*?)<\/a>/)，但这个例子假设标签没有属性）。

【讨论】：

这与任何真实标签都不匹配。此外，未关闭的 <a> 标签是有效的 HTML。（相对于 XHTML）
是的，我编辑了我的答案。至于未封闭的<a> 标签，我不知道它在 HTML 中是否有效。但这并没有真正的意义，而且我还没有见过这样的事情。因此，如果您信任字符串的来源，则 regexp 方法大部分时间都可以工作。
<a> 标签也是锚点（用于# 链接）。锚点没有内容。
为什么你会相信一个字符串？
@SLaks，当您可以控制字符串的构造时，您可能会信任该字符串。

【解决方案4】：

如果关注性能，这里有一个本地（非库）解决方案。

function stripTag(str, tag) {
    var a, parent, div = document.createElement('div');
    div.innerHTML = str;
    a = div.getElementsByTagName( tag );
    while( a[0] ) {
        parent = a[0].parentNode;
        while (a[0].firstChild) {
            parent.insertBefore(a[0].firstChild, a[0]);
        }
        parent.removeChild(a[0]);
    }
    return div.innerHTML;
}

像这样使用它：

alert( stripTag( my_string, 'a' ) );

【讨论】：