我需要在頁面加載時突出顯示搜索到的文本，匹配特定單詞的整個單詞將被突出顯示。使用JQuery搜索和突出顯示

我知道我可以使用DIV &的ID相應突出的領域。

在這裏，我有DIV
的結構複雜的問題，我發現這對谷歌，但這個工程在「P：」

var str = "test"; 
     $(function(){ 
      $('p:contains('+str+')'). 
       each(function(){ 
       var regex = new RegExp(str, "g"); 
       $(this).html(
        $(this).html(). 
         replace(regex , 
           "<span class='highlight'>"+str+"</span>" 
           ) 
       ); 
      }); 
    });

我試圖亂用這個代碼遍歷DIV相反，但我不能找到解決辦法

來源

2011-07-10 Echo

如果你知道你在做什麼，只能使用'html'。它會破壞並創建DOM元素，這意味着你會鬆散事件處理程序。看看[這個插件]（https://github.com/fkling/jquery_playground/blob/master/jquery_text_highlight.js）我創建了一個類似的問題。 –

我已經找到了答案，我的解決方案here。

來源

2011-07-11 09:40:54 Echo

這也適用於我。 – VoidKing

-1

我創建了一個基於由@Echo提到的插件的插件。這個版本的優點是它可以讓你「一次突出一大堆詞」。

它的目的等，其中會傳遞給它的搜索字符串護目鏡亮點工作，找到的那些話出現，並強調他們。

你可以把它撿起來here

來源

2011-11-29 22:24:43 isaac

當我遵循你在插件上顯示的非常有限的指令時，我只是得到'.js'錯誤（嘗試了幾種不同的方式），所以我只能假設它沒有正確設置。當我按照您在網站上展示的方式進行操作時，我只知道我所指定的任何元素都沒有「easyMark」方法。我喜歡這個插件背後的前提，但我只能假設它不再有效，如果它曾經。 – VoidKing

-2

要突出顯示多個文字使用此修改highlight.js

https://github.com/tankchintan/highlight-js

用法：

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="jquery.js" type="text/javascript"></script> 
     <script src="highlight.js" type="text/javascript"></script> <!-- https://github.com/tankchintan/highlight-js --> 
     <script> 
     function highlightme() 
     { 
     var str=document.getElementById('search').value; 
     var strarray=str.split(" "); 
     void($('#content').removeHighlight().highlight(n)); //pass string array to function 
     } 
     </script> 
     <style type="text/css"> 
     .highlight{ background-color:yellow; } 
     </style> 
    </head> 
    <body > 
     <input type="text" name="search" id="search" onblur="highlightme()" /> 
     <div id="content">Highlight Highlight Test Multiple</div> 
     <a href="JavaScript:$('#content').removeHighlight();">Clear highlight</a> 
    </body> 
    </html>

來源

2012-11-01 20:02:01 Baskaran

-1

這JQuery Highlight Plugin提供一些額外的選項（如僅根據OP的要求搜索整個單詞）並且使用起來非常簡單。

我用它作爲

$(".materia").highlight($('#tbxBusca').val());

突出輸入到一個文本框的文本。

來源

2013-12-16 13:24:33 marquito

爲什麼使用自制的高亮功能是一個壞主意

爲什麼它可能是一個壞主意，從頭開始建立自己的高亮功能的原因是因爲你肯定會碰到別人已經解決的問題。挑戰：

您需要刪除文本節點與HTML元素來突出你的比賽，而不破壞DOM事件，並一遍又一遍地觸發DOM再生（這將與如innerHTML的情況下）
如果你想要刪除突出顯示的元素，您必須刪除HTML元素及其內容，還必須組合分割的文本節點以進一步搜索。這是必要的，因爲每個熒光筆插件都在文本節點內搜索匹配項，並且如果您的關鍵字將被拆分爲多個文本節點，則不會被找到。
您還需要構建測試以確保您的插件在您未曾考慮過的情況下工作。我正在談論跨瀏覽器測試！

聽起來很複雜？如果您想要某些功能，例如忽略突出顯示的某些元素，變音符映射，同義詞映射，內部iframe搜索，分詞搜索等，這會變得越來越複雜。

使用現有的插件

在使用現有的，以及實施的插件，你不必擔心上面提到的事情。文章10 jQuery text highlighter plugins Sitepoint比較流行的熒光筆插件。這包括這個問題的答案插件。

看一看mark.js

mark.js是這樣的，是用純JavaScript的一個插件，但也可作爲jQuery插件。它的開發與選擇，提供比其它插件更多的機會：

搜索關鍵字分開，而不是完整的長期
圖變音符號（例如，如果「胡斯托」應當同時符合「胡斯托」）
忽略內部定製元素匹配
使用定製突出元件
使用定製高亮類
地圖定製同義詞
搜索還iframe內
收到找不到條款

DEMO

或者你可以看到this fiddle。

使用例如：

// Highlight "keyword" in the specified context 
$(".context").mark("keyword"); 

// Highlight the custom regular expression in the specified context 
$(".context").markRegExp(/Lorem/gmi);

這是由我在GitHub上（project reference）開發的免費，開源的。

來源

2016-05-20 10:12:09 dude

使用JQuery搜索和突出顯示

回答

爲什麼使用自制的高亮功能是一個壞主意

使用現有的插件

看一看mark.js

相關問題