JavaScript的搜索，并突出显示文本

可能重复：
Implementing a highlight feature for a live search in JavaScript/JQuery JavaScript的搜索，并突出显示文本

假设我有一个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，这意味着我不得不将文本包装在标签中，然后将高亮类应用于该新标签。

这样做的最好方法是什么？

来源

2012-05-29 Justin

删除我的答案是：有一种方法，但它的一个坏榜样：http://jsfiddle.net/Q2GcK/（礼貌@ FelixKling - 这是一个比较糟糕的例子，它也会尝试替换HTML属性中的单词，并且会销毁任何绑定到元素内任何元素的事件处理程序。“ –

你也可以看看[我的插件在这里]（https：/ /github.com/fkling/jquery_playground/blob/master/jquery_text_highlight.js）它还没有完成，但它可以突出显示简单的文本。 –

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

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

来源

2012-05-29 09:40:03 Justin

尝试......

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

来源

2012-05-29 09:41:50

这个'这是一个相对不好的例子。它也会尝试替换HTML属性中的单词，并且会销毁任何绑定到'element'中的任何元素的事件处理程序。 –

JavaScript的搜索，并突出显示文本

回答

相关问题