10款jQuery文字高亮外掛

【編者按】本文作者為 Julian Motz，主要介紹十款 jQuery 文字高亮外掛的現狀。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現。

很多應用或網站都為使用者提供搜尋關鍵詞的方法。為了加快這一過程，提供良好的使用者體驗，幫助使用者準確地查詢到他們搜尋的內容，你可以在頁面中動態高亮這些搜尋關鍵字。

這裡有10款jQuery文字高亮外掛，可以實現這一功能。

1. mark.js

這是用於搜尋術語或自定義正規表示式的關鍵字高亮外掛，使用ES6語言編寫，基於幾十個跨瀏覽器的單元測試，以及程式碼質量監測。它的開發旨在適用於所有用例，包括以下提到的所有文字高亮外掛，以及更多外掛(比如，diacritics，synonyms和iframes)的用例。

網站 原始碼

2. highlight

這是一款非常簡單，小型的文字高亮外掛，為其他外掛奠定了基礎。因為它不允許任何自定義，它的優勢是檔案非常小(1.4 KB)。

網站 原始碼

3. jquery.highlight

該外掛在外掛2(highlight)的基礎上，新增了基本選項，可以自定義元素和類名，以及區分大小寫(caseSensitive)和字匹配功能(wordsOnly)。 遺憾的是，這個外掛現在無人維護(最後更新是2010年)，並且有一些問題缺陷，所以應該謹慎使用。

網站 原始碼

4. jQuery.highlightRegex

又一個基於外掛2(highlight)的外掛，能高亮自定義正規表示式。和jquery.highlight（外掛3）一樣，它提供了自定義的元素和類名的功能。其他功能可以通過手動新增自定義正規表示式實現，比如新增“i” 標記以忽略大寫和小寫。

網站 原始碼

5. highlight_words

這是一個簡單的jQuery高亮函式。與highlight(外掛2)一樣，沒有任何自定義選項。你應該清楚，它並不提供取消高亮的功能，並且不支援搜尋巢狀子元素。然而，它確實為進一步實施提供了良好的基礎——儘管它不包含任何授權資訊。

原始碼

6. jcOnPageFilter

這個外掛允許你根據搜尋關鍵字過濾列表，高亮查詢到的匹配字元。它有一個啟用區分大小寫搜尋的選項，但不包含授權資訊。

原始碼

7. SearchHighlight

另一款文字高亮外掛，為你提供的功能包括：自定義高亮類；類字尾；以及準確搜尋(exact)選項，用於從搜尋引擎處查詢完全匹配，高亮查詢引數。

這一外掛是2006年編寫的，很長時間沒有更新，並且不包含授權資訊，所以你應該謹慎對待。

原始碼

8. jquery-highlighter

這一外掛通過實現必要的CSS動畫，允許你為自行裝飾的文字高亮元素新增動畫。當然，如果你願意，也可以自己編寫CSS。

原始碼

9. TextHighlighter

使用這一外掛，你可以使用自定義顏色高亮選中的文字，或者只是觀察使用者選中的文字。該外掛已經不再維護，你應該謹慎使用。

網站 原始碼

10. jQuery highlightTextarea

因為textarea元素不能渲染HTML(以上所有外掛都會為匹配生成 HTML標籤)，該外掛允許你在textarea元素中高亮文字。它提供了大小寫區分(caseSensitive)，顏色(color)等功能，構建時經過了一些單元測試，但是仍存在很多問題，而且它不提供取消高亮這一功能。

結論

以上是筆者心目中的十大jQuery文字高亮外掛。如果你有這方面的經驗(無論好壞)，或者瞭解其他文字高亮外掛，請參與評論！

OneAPM Browser Insight 是一個基於真實使用者的 Web 前端效能監控平臺，能幫助大家定位網站效能瓶頸，實現網站加速效果視覺化；支援瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術部落格。

本文轉自 OneAPM 官方部落格

原文地址：https://www.sitepoint.com/10-jquery-text-highlighter-plugins/