为什么用Javascript RegEx在文本周围包装标签会将标签显示为文本

Why does wrapping tags around text with Javascript RegEx display the tags as text?

本文关键字：文本 标签 显示 包装 周围 Javascript RegEx 为什么      更新时间：2023-09-26

我试图将标签包装在一组链接中的某些单词周围，但标签呈现为文本。为什么会这样，我该怎么做才能让它们呈现为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

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

我做错了什么？

您必须自己创建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>'
    );
});
相关文章：