此文章於2016年5月更新，以反映當(dāng)前文本高亮插件的現(xiàn)狀。

許多應(yīng)用程序或網(wǎng)站都允許用戶搜索特定術(shù)語。為了加快此過程，提供良好的用戶體驗(yàn)，並幫助用戶找到他們正在搜索的內(nèi)容，您可以在給定頁面上動(dòng)態(tài)突出顯示這些搜索術(shù)語。

以下列出了10款可用於實(shí)現(xiàn)此目的的jQuery文本高亮插件。

關(guān)鍵要點(diǎn)

• 本文列出了10款jQuery文本高亮插件，可用於動(dòng)態(tài)突出顯示網(wǎng)頁上的搜索詞，從而改善用戶體驗(yàn)。
• 列出的插件包括：基於跨瀏覽器單元測(cè)試的關(guān)鍵字高亮插件mark.js；簡(jiǎn)潔小巧的highlight插件；可定制但未維護(hù)的jquery.highlight插件；用於突出顯示自定義正則表達(dá)式的jQuery.highlightRegex插件；簡(jiǎn)單的、無自定義選項(xiàng)的highlight_words函數(shù)；用於根據(jù)搜索詞過濾列表的jcOnPageFilter插件；用於定義自定義高亮類別的SearchHighlight插件；用於文本高亮元素動(dòng)畫的jquery -highlighter插件；用於突出顯示選定文本並自定義顏色的TextHighlighter插件；以及用於突出顯示textarea元素內(nèi)文本的jQuery highlightTextarea插件。
• 本文還解答了關(guān)於jQuery文本高亮插件的常見問題，例如如何安裝和自定義插件、其瀏覽器兼容性、如何移除高亮以及其對(duì)頁面性能的影響。

1. mark.js 一個(gè)用於搜索詞或自定義正則表達(dá)式的關(guān)鍵字高亮插件，使用ES6編寫，基於數(shù)十個(gè)跨瀏覽器單元測(cè)試以及代碼質(zhì)量監(jiān)控。它旨在滿足各種用例，並包含以下文本高亮插件中的所有選項(xiàng)以及更多選項(xiàng)（例如，變音符號(hào)、同義詞和iframe）。

   查看CodePen演示
   源碼

2. highlight 一個(gè)非常簡(jiǎn)單且輕巧的文本高亮插件，為許多分支奠定了基礎(chǔ)。因?yàn)樗辉试S任何自定義，所以它的優(yōu)勢(shì)在於文件大小很?。?.4 KB）。

   查看CodePen演示
   源碼

3. jquery.highlight highlight（上文第2點(diǎn)）的一個(gè)分支，增加了指定自定義元素和類名以及caseSensitive和wordsOnly選項(xiàng)的基本選項(xiàng)。不幸的是，此插件未維護(hù)（上次提交於2010年，沒有分支重新整合），並且存在禁用問題，因此應(yīng)謹(jǐn)慎使用。

   查看CodePen演示
   源碼

4. jQuery.highlightRegex 另一個(gè)基於highlight（上文第2點(diǎn)）的插件，用於突出顯示自定義正則表達(dá)式。與jquery.highlight（上文第3點(diǎn)）一樣，它提供了指定自定義元素和類名的基本選項(xiàng)。其他選項(xiàng)可以手動(dòng)添加到自定義正則表達(dá)式中——例如，“i”標(biāo)誌以忽略大小寫。

   查看CodePen演示
   源碼

5. highlight_words 一個(gè)簡(jiǎn)單的jQuery高亮函數(shù)，沒有任何自定義選項(xiàng)，就像highlight（上文第2點(diǎn)）一樣。您應(yīng)該注意，它不提供移除高亮的函數(shù)，也不便於在嵌套子元素中搜索。但是，它確實(shí)為進(jìn)一步的實(shí)現(xiàn)提供了一個(gè)良好的基礎(chǔ)——儘管它不包含許可信息。

   查看CodePen演示
   源碼

6. jcOnPageFilter 此插件允許您使用搜索詞過濾列表並突出顯示找到的匹配項(xiàng)。它有一個(gè)選項(xiàng)可以啟用區(qū)分大小寫的搜索，但不包含許可信息。

   查看CodePen演示
   源碼

7. SearchHighlight 另一個(gè)文本高亮插件，它提供選項(xiàng)來定義自定義高亮類；一個(gè)類後綴；一個(gè)精確選項(xiàng)，用於查找諸如精確匹配項(xiàng)和突出顯示來自搜索引擎的查詢參數(shù)（這在大多數(shù)情況下已不再可能）。

   該插件編寫於2006年，很久沒有更新，並且不包含許可信息，因此在使用時(shí)應(yīng)謹(jǐn)慎。

   查看CodePen演示
   源碼

8. jquery-highlighter 此插件允許您通過為您實(shí)現(xiàn)必要的CSS動(dòng)畫設(shè)置來設(shè)置自包裹文本高亮元素的動(dòng)畫。當(dāng)然，如果您願(yuàn)意，也可以自己編寫CSS。

   查看CodePen演示
   源碼

9. TextHighlighter 使用此插件，您可以使用自定義顏色突出顯示選定的文本，或者只是觀察用戶選擇的文本。由於此插件不再維護(hù)，因此您應(yīng)該謹(jǐn)慎使用。

   查看CodePen演示
   源碼

10. jQuery highlightTextarea 由於textarea元素?zé)o法呈現(xiàn)HTML（就像上述任何插件都會(huì)為匹配項(xiàng)生成一樣），因此此插件允許您突出顯示textarea元素內(nèi)的文本。它提供諸如caseSensitive和顏色之類的選項(xiàng)，並且是基於一些單元測(cè)試構(gòu)建的，但是有很多未解決的問題，並且它不提供高亮移除功能。

    查看CodePen演示
    源碼

結(jié)論

好了，這就是我目前排名前十的jQuery文本高亮插件列表。如果您對(duì)這些插件有任何經(jīng)驗(yàn)（好的或壞的?。?，或者如果您知道其他值得一提的文本高亮插件，請(qǐng)?jiān)谠u(píng)論中告訴我們！

關(guān)於jQuery文本高亮插件的常見問題

(此處應(yīng)包含與原文相同的FAQ部分，但為了避免重複，這裡省略。)

請(qǐng)注意，以上所有“查看CodePen演示”和“源碼”都需要替換為實(shí)際的http://miracleart.cn/link/946af3555203afdb63e571b873e419f6和GitHub或其他源碼託管平臺(tái)的鏈接。 我無法訪問外部網(wǎng)站，因此無法提供這些鏈接。

以上是10 jQuery文本熒光筆插件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！