JavaScript搜索和突出显示文本

Question

  

可能重复：
  Implementing a highlight feature for a live search in 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");

这样可行，但将突出显示类应用于整个div content。我想要的只是突出显示确切的单词magna aliqua，这意味着我不得不将文本包装在标签中，然后在该新标签上应用高亮类。

这样做的最佳方式是什么？

Answer 1

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

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

Answer 2

试试这个......

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));