JavaScript 搜索和突出显示文本 [重复]答案

【问题标题】：JavaScript Search And Highlight Text [duplicate]JavaScript 搜索和突出显示文本 [重复]
【发布时间】：2012-05-29 17:45:51
【问题描述】：

可能重复：
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，这意味着我必须以某种方式将文本包装在标签中，然后在该新标签上应用突出显示类。

最好的方法是什么？

【问题讨论】：

删除我的答案：有一种方法，但它是一个糟糕的例子：jsfiddle.net/Q2GcK（礼貌@FelixKling - 这是一个相对糟糕的例子。它还会尝试替换 HTML 属性中的单词并会破坏任何已绑定到元素内任何元素的事件处理程序。"
你也可以看看my plugin here。它还没有完成，但它适用于突出显示简单的文本。

标签： javascript jquery search

【解决方案1】：

很棒的插件highlight。此分支支持正则表达式搜索。

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

【讨论】：

【解决方案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));

【讨论】：

这是一个比较糟糕的例子。它还会尝试替换 HTML 属性中的单词，并销毁绑定到 element 内任何元素的任何事件处理程序。