jQuery: 如何查找字符串并将其包装在<a>标签中？

Question

i've got this:

<div class="" id="fancy_hover">
    <a href="home.html" id="start_writer"></a>  
    <div>
        <p class="hidden" style="display: block;">click here to see this event with all the bells and whistles</p>
    </div>
</div>

我需要找到字符串"click here"的等效方法，类似于.find()但不是针对节点的搜索。然后我需要将其包装在一个<a>标签中。

使用jQuery最好的方法是什么？

- Haroldo

---

你需要将整个文本节点包装在<a>标签中还是只需将“点击这里”这几个单词包装在其中？ - Andy E

Answer 1

使用 :contains 过滤选择器：

$('p.hidden:contains("click here")')

将其包装为链接：

$('p.hidden:contains("click here")').html()
.replace('click here', '<a href="url">click here</a>');

将整个文本包装在链接中：

$('p.hidden:contains("click here")')
.html('<a href="url">' + $('p.hidden:contains("click here")').text() + '<a>');

更多信息：

• http://api.jquery.com/contains-selector/

- Sarfraz

---

有帮助的答案。谢谢。 - Ilyas karim

Answer 2

不要使用HTML字符串篡改。想象一下，如果您尝试用<a>标签替换<span title="blah click here blah">...</span>，会导致严重的标记失效。这只是问题的开始。

相反，在您想要检查的文档部分中迭代文本节点，查找文本匹配项，并使用DOM样式方法插入新链接。

jQuery在处理文本节点方面并没有太多帮助，因为它没有处理文本节点的功能。相反，使用此问题中的findText()函数，并使用splitText来拆分文本节点。

findText($('#fancy_hover')[0], /\bClick here\b/gi, function(node, match) {
    node.splitText(match.index+match[0].length);
    var link= document.createElement('a');
    link.href= 'http://www.example.com/';
    link.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(link, node.nextSibling);
});

- bobince