10 jQuery文本熒光筆插件

此文章於2016年5月更新，以反映當前文本高亮插件的現狀。

許多應用程序或網站都允許用戶搜索特定術語。為了加快此過程，提供良好的用戶體驗，並幫助用戶找到他們正在搜索的內容，您可以在給定頁面上動態突出顯示這些搜索術語。

以下列出了10款可用於實現此目的的jQuery文本高亮插件。

關鍵要點

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

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

   查看CodePen演示
   源碼

2. highlight 一個非常簡單且輕巧的文本高亮插件，為許多分支奠定了基礎。因為它不允許任何自定義，所以它的優勢在於文件大小很小（1.4 KB）。

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

   該插件編寫於2006年，很久沒有更新，並且不包含許可信息，因此在使用時應謹慎。

   查看CodePen演示
   源碼

8. jquery-highlighter 此插件允許您通過為您實現必要的CSS動畫設置來設置自包裹文本高亮元素的動畫。當然，如果您願意，也可以自己編寫CSS。

   查看CodePen演示
   源碼

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

   查看CodePen演示
   源碼

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

    查看CodePen演示
    源碼

結論

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

關於jQuery文本高亮插件的常見問題

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

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

以上是10 jQuery文本熒光筆插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！