javascript - JavaScript 搜索和突出显示文本

Question

可能重复：
在 JavaScript/JQuery 中为实时搜索实现突出显示功能

假设我有一个 div：

<div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

基本上我想通过 javascript 进行搜索，然后突出显示结果。因此，假设搜索查询是magna aliqua. 我正在执行以下操作：

$("#content:contains('magna aliqua')").addClass("highlight");

这有效，但将 highlight 类应用于整个 div content。我想要的是仅突出显示确切的单词 magna aliqua，这意味着我必须以某种方式将文本包装在标签中，然后在该新标签上应用突出显示类。

做这个的最好方式是什么？

Answer 1

尝试这个...

word = 'magna aliqua'
var rgxp = new RegExp(word, 'g');
var repl = '<span class="myClass">' + word + '</span>';

var element = $("#content:contains(word)");
element.html(element.html().replace(rgxp, repl));

Answer 2

很棒的插件highlight。这个 fork 支持正则表达式搜索。

http://beatgates.blogspot.com/2011/07/extend-jqueryhighlight-to-highlight.html