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的搜索，並突出顯示文本

回答

相關問題