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/