为什么使用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节点自己，这是繁琐的，或者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>' 
    ); 
});