10 jQuery文本荧光笔插件

此文章于2016年5月更新，以反映当前文本高亮插件的现状。

许多应用程序或网站都允许用户搜索特定术语。为了加快此过程，提供良好的用户体验，并帮助用户找到他们正在搜索的内容，您可以在给定页面上动态突出显示这些搜索术语。

以下列出了10款可用于实现此目的的jQuery文本高亮插件。

关键要点

• 本文列出了10款jQuery文本高亮插件，可用于动态突出显示网页上的搜索词，从而改善用户体验。
• 列出的插件包括：基于跨浏览器单元测试的关键字高亮插件mark.js；简洁小巧的highlight插件；可定制但未维护的jquery.highlight插件；用于突出显示自定义正则表达式的jQuery.highlightRegex插件；简单的、无自定义选项的highlight_words函数；用于根据搜索词过滤列表的jcOnPageFilter插件；用于定义自定义高亮类别的SearchHighlight插件；用于文本高亮元素动画的jquery-highlighter插件；用于突出显示选定文本并自定义颜色的TextHighlighter插件；以及用于突出显示textarea元素内文本的jQuery highlightTextarea插件。
• 本文还解答了关于jQuery文本高亮插件的常见问题，例如如何安装和自定义插件、其浏览器兼容性、如何移除高亮以及其对页面性能的影响。

1. mark.js 一个用于搜索词或自定义正则表达式的关键字高亮插件，使用ES6编写，基于数十个跨浏览器单元测试以及代码质量监控。它旨在满足各种用例，并包含以下文本高亮插件中的所有选项以及更多选项（例如，变音符号、同义词和iframe）。

   查看CodePen演示
   源码

2. highlight 一个非常简单且轻巧的文本高亮插件，为许多分支奠定了基础。因为它不允许任何自定义，所以它的优势在于文件大小很小（1.4 KB）。

   查看CodePen演示
   源码

3. jquery.highlight highlight（上文第2点）的一个分支，增加了指定自定义元素和类名以及caseSensitive和wordsOnly选项的基本选项。不幸的是，此插件未维护（上次提交于2010年，没有分支重新整合），并且存在禁用问题，因此应谨慎使用。

   查看CodePen演示
   源码

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

   查看CodePen演示
   源码

5. highlight_words 一个简单的jQuery高亮函数，没有任何自定义选项，就像highlight（上文第2点）一样。您应该注意，它不提供移除高亮的函数，也不便于在嵌套子元素中搜索。但是，它确实为进一步的实现提供了一个良好的基础——尽管它不包含许可信息。

   查看CodePen演示
   源码

6. jcOnPageFilter 此插件允许您使用搜索词过滤列表并突出显示找到的匹配项。它有一个选项可以启用区分大小写的搜索，但不包含许可信息。

   查看CodePen演示
   源码

7. SearchHighlight 另一个文本高亮插件，它提供选项来定义自定义高亮类；一个类后缀；一个精确选项，用于查找诸如精确匹配项和突出显示来自搜索引擎的查询参数（这在大多数情况下已不再可能）。

   该插件编写于2006年，很久没有更新，并且不包含许可信息，因此在使用时应谨慎。

   查看CodePen演示
   源码

8. jquery-highlighter 此插件允许您通过为您实现必要的CSS动画设置来设置自包裹文本高亮元素的动画。当然，如果您愿意，也可以自己编写CSS。

   查看CodePen演示
   源码

9. TextHighlighter 使用此插件，您可以使用自定义颜色突出显示选定的文本，或者只是观察用户选择的文本。由于此插件不再维护，因此您应该谨慎使用。

   查看CodePen演示
   源码

10. jQuery highlightTextarea 由于textarea元素无法呈现HTML（就像上述任何插件都会为匹配项生成一样），因此此插件允许您突出显示textarea元素内的文本。它提供诸如caseSensitive和颜色之类的选项，并且是基于一些单元测试构建的，但是有很多未解决的问题，并且它不提供高亮移除功能。

    查看CodePen演示
    源码

结论

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

关于jQuery文本高亮插件的常见问题

(此处应包含与原文相同的FAQ部分，但为了避免重复，这里省略。)

请注意，以上所有“查看CodePen演示”和“源码”都需要替换为实际的https://www.php.cn/link/946af3555203afdb63e571b873e419f6和GitHub或其他源码托管平台的链接。 我无法访问外部网站，因此无法提供这些链接。

以上是10 jQuery文本荧光笔插件的详细内容。更多信息请关注PHP中文网其他相关文章！