【編者按】本文作者為 Julian Motz，主要介紹十款 jQuery 文本高亮插件的現(xiàn)狀。文章系國(guó)內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)。

很多應(yīng)用或網(wǎng)站都為用戶提供搜索關(guān)鍵詞的方法。為了加快這一過程，提供良好的用戶體驗(yàn)，幫助用戶準(zhǔn)確地查找到他們搜索的內(nèi)容，你可以在頁(yè)面中動(dòng)態(tài)高亮這些搜索關(guān)鍵字。

這里有10款jQuery文本高亮插件，可以實(shí)現(xiàn)這一功能。

1. mark.js

這是用于搜索術(shù)語(yǔ)或自定義正則表達(dá)式的關(guān)鍵字高亮插件，使用ES6語(yǔ)言編寫，基于幾十個(gè)跨瀏覽器的單元測(cè)試，以及代碼質(zhì)量監(jiān)測(cè)。它的開發(fā)旨在適用于所有用例，包括以下提到的所有文本高亮插件，以及更多插件(比如，diacritics，synonyms和iframes)的用例。

網(wǎng)站
源碼

2. highlight

這是一款非常簡(jiǎn)單，小型的文本高亮插件，為其他插件奠定了基礎(chǔ)。因?yàn)樗辉试S任何自定義，它的優(yōu)勢(shì)是文件非常小(1.4 KB)。

網(wǎng)站
源碼

3. jquery.highlight

該插件在插件2(highlight)的基礎(chǔ)上，添加了基本選項(xiàng)，可以自定義元素和類名，以及區(qū)分大小寫(caseSensitive)和字匹配功能(wordsOnly)。 遺憾的是，這個(gè)插件現(xiàn)在無(wú)人維護(hù)(最后更新是2010年)，并且有一些問題缺陷，所以應(yīng)該謹(jǐn)慎使用。

網(wǎng)站
源碼

4. jQuery.highlightRegex

又一個(gè)基于插件2(highlight)的插件，能高亮自定義正則表達(dá)式。和jquery.highlight（插件3）一樣，它提供了自定義的元素和類名的功能。其他功能可以通過手動(dòng)添加自定義正則表達(dá)式實(shí)現(xiàn)，比如添加“i” 標(biāo)記以忽略大寫和小寫。

網(wǎng)站
源碼

5. highlight_words

這是一個(gè)簡(jiǎn)單的jQuery高亮函數(shù)。與highlight(插件2)一樣，沒有任何自定義選項(xiàng)。你應(yīng)該清楚，它并不提供取消高亮的功能，并且不支持搜索嵌套子元素。然而，它確實(shí)為進(jìn)一步實(shí)施提供了良好的基礎(chǔ)——盡管它不包含任何授權(quán)信息。

源碼

6. jcOnPageFilter

這個(gè)插件允許你根據(jù)搜索關(guān)鍵字過濾列表，高亮查找到的匹配字符。它有一個(gè)啟用區(qū)分大小寫搜索的選項(xiàng)，但不包含授權(quán)信息。

源碼

7. SearchHighlight

另一款文本高亮插件，為你提供的功能包括：自定義高亮類；類后綴；以及準(zhǔn)確搜索(exact)選項(xiàng)，用于從搜索引擎處查找完全匹配，高亮查詢參數(shù)。

這一插件是2006年編寫的，很長(zhǎng)時(shí)間沒有更新，并且不包含授權(quán)信息，所以你應(yīng)該謹(jǐn)慎對(duì)待。

源碼

8. jquery-highlighter

這一插件通過實(shí)現(xiàn)必要的CSS動(dòng)畫，允許你為自行裝飾的文本高亮元素添加動(dòng)畫。當(dāng)然，如果你愿意，也可以自己編寫CSS。

源碼

9. TextHighlighter

使用這一插件，你可以使用自定義顏色高亮選中的文本，或者只是觀察用戶選中的文本。該插件已經(jīng)不再維護(hù)，你應(yīng)該謹(jǐn)慎使用。

網(wǎng)站
源碼

10. jQuery highlightTextarea

因?yàn)閠extarea元素不能渲染HTML(以上所有插件都會(huì)為匹配生成 HTML標(biāo)簽)，該插件允許你在textarea元素中高亮文本。它提供了大小寫區(qū)分(caseSensitive)，顏色(color)等功能，構(gòu)建時(shí)經(jīng)過了一些單元測(cè)試，但是仍存在很多問題，而且它不提供取消高亮這一功能。

結(jié)論

以上是筆者心目中的十大jQuery文本高亮插件。如果你有這方面的經(jīng)驗(yàn)(無(wú)論好壞)，或者了解其他文本高亮插件，請(qǐng)參與評(píng)論！

OneAPM Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)，能幫助大家定位網(wǎng)站性能瓶頸，實(shí)現(xiàn)網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁(yè)面。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自 OneAPM 官方博客

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