10个jQuery Text Highlighter插件

这篇热门文章已于2016年5月更新，以反映文本荧光笔插件的当前状态。

许多应用程序或网站为用户提供了一种搜索特定术语的方法。 为使此过程更快，提供出色的用户体验并通常帮助用户找到他们要搜索的内容，您可以在给定页面上动态突出显示这些搜索词。

这里有10个jQuery文本荧光笔插件，您可以使用它们来实现此目的。

1. mark.js

用ES6编写的搜索词或自定义正则表达式的关键字突出显示工具，基于数十个跨浏览器单元测试以及代码质量监控。 它是为满足每种用例而开发的，包括以下文本突出显示插件的所有选项以及更多其他功能（例如变音符号，同义词和iframe）。

见笔mark.js演示由SitePoint（ @SitePoint上） CodePen 。

网站
源代码

2.突出显示

一个非常简单且很小的文本突出显示插件，为许多分支奠定了基础。 因为它不允许任何自定义，所以它的优点是文件很小（1.4 KB）。

请参阅CodePen上SitePoint （ @SitePoint ）的Pen高光演示 。

网站
源代码

3. jquery.highlight

突出显示的分叉（上面的＃2），添加了基本选项以指定自定义元素和类名称以及选项caseSensitive和wordsOnly 。 不幸的是，此插件未维护（2010年最后一次提交，没有fork变基），并且已禁用问题，因此应谨慎使用。

见笔jquery.highlight演示由SitePoint（ @SitePoint上） CodePen 。

网站
源代码

4. jQuery.highlightRegex

另一个基于Highlight （上面的＃2）突出显示自定义正则表达式的插件。 像jquery.highlight （上面的＃3）一样，它提供了用于指定自定义元素和类名称的基本选项。 可以将其他选项手动添加到自定义正则表达式中，例如“ i”标志可忽略大写和小写。

见笔jQuery.highlightRegex演示由SitePoint（ @SitePoint ）上CodePen 。

网站
源代码

5. Highlight_words

一个简单的jQuery高亮功能，没有任何自定义选项，就像高亮 （上面的＃2）一样。 您应该意识到，它不提供删除突出显示的功能，并且不便于在嵌套子代中进行搜索。 但是，它确实提供了进一步实施的良好基础-尽管其中不包含许可信息。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Highlight_words 演示 。

源代码

6. jcOnPageFilter

该插件可让您过滤带有搜索字词的列表，并突出显示找到的匹配项。 它具有启用区分大小写搜索的选项，但不包含许可信息。

见笔jcOnPageFilter演示由SitePoint（ @SitePoint ）上CodePen 。

源代码

7. SearchHighlight

另一个文本突出显示插件，可为您提供定义自定义突出显示类的选项； 类后缀； 一个exact选项，用于查找诸如精确匹配之类的内容并从搜索引擎突出显示查询参数（这几乎不再可能 ）。

该插件编写于2006年，已经很长时间没有更新，并且不包含许可信息，因此在使用时应格外小心。

见笔SearchHighlight演示由SitePoint（ @SitePoint ）上CodePen 。

源代码

8. jquery-highlighter

通过此插件，您可以通过为您实现必要的CSS动画设置来设置自动包装的文本突出显示元素的动画。 当然，您可以根据需要自己编写CSS。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen jquery-highlighter演示 。

源代码

9. TextHighlighter

使用此插件，您可以使用自定义颜色突出显示选定的文本，或者仅观察用户对文本的选择。 由于此插件不再维护，因此请谨慎使用。

见笔TextHighlighter演示由SitePoint（ @SitePoint ）上CodePen 。

网站
源代码

10. jQuery HighlightTextarea

由于textarea元素无法呈现HTML（就像上面的任何插件都会为匹配生成一样），因此该插件可让您突出显示textarea元素内的文本。 它提供了caseSensitive和color类的选项，并且是基于某些单元测试构建的，但是存在许多未解决的问题 ，并且不提供突出显示删除功能。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen jQuery highlightTextarea演示 。

网站
源代码

结论

好吧，这就是我目前排名前十的jQuery文本荧光笔插件列表。 如果您有任何经验（好或坏！），或者您知道其他值得一提的文本荧光笔插件，请在评论中告诉我们！

From: https://www.sitepoint.com/10-jquery-text-highlighter-plugins/