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

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

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

關(guān)鍵要點

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

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

   查看CodePen演示
   源碼

2. highlight 一個非常簡單且輕巧的文本高亮插件，為許多分支奠定了基礎(chǔ)。因為它不允許任何自定義，所以它的優(yōu)勢在于文件大小很?。?.4 KB）。

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

    查看CodePen演示
    源碼

結(jié)論

好了，這就是我目前排名前十的jQuery文本高亮插件列表。如果您對這些插件有任何經(jīng)驗（好的或壞的?。?，或者如果您知道其他值得一提的文本高亮插件，請在評論中告訴我們！

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

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

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

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