javascript - 为什么使用 Javascript RegEx 围绕文本包装标签将标签显示为文本？

Question

我试图在一组链接中围绕某些单词包装标签，但标签呈现为文本。为什么会这样，我该怎么做才能让它们呈现为 HTML？

我有以下Javascript：

$('h3 a').each( function(){
    var text = this.firstChild.nodeValue;
    this.firstChild.nodeValue = text.replace(
        /(^Men\'s|Men’s|Women\'s|Women’s)/g,
        '<span class=\"title\">$1</span>'
    );
});

这是 HTML 的示例：

<p><a href="products1.html">Women's Apparel</a></p>
<p><a href="products2.html">Men's Apparel</a></p>

我的浏览器内结果类似于：

<span class="title">Women's</span> Apparel
<span class="title">Men's</span> Apparel

...但显然我希望这些跨度成为功能元素，而不是在浏览器中显示为文本。

我究竟做错了什么？

Answer 1

您必须自己创建 DOM 节点，这很乏味，或者使用 DOM 节点innerHTML，这将被解析并为您转换为 DOM 子树：

$('h3 a').each( function(){
    var text = this.firstChild.nodeValue;
    this.innerHTML = text.replace(
        /(^Men\'s|Men’s|Women\'s|Women’s)/g,
        '<span class=\"title\">$1</span>'
    );
});