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/