10个jQuery Text Highlighter插件

蒋俊
2023-12-01

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

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

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

1. mark.js

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

见笔mark.js演示由SitePoint( @SitePoint上) CodePen

网站
源代码

2.突出显示

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

请参阅CodePenSitePoint@SitePoint )的Pen高光演示

网站
源代码

3. jquery.highlight

突出显示的分叉(上面的#2),添加了基本选项以指定自定义元素和类名称以及选项caseSensitivewordsOnly 。 不幸的是,此插件未维护(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元素内的文本。 它提供了caseSensitivecolor类的选项,并且是基于某些单元测试构建的,但是存在许多未解决的问题 ,并且不提供突出显示删除功能。

请参阅CodePen上的SitePoint@SitePoint )的Pen jQuery highlightTextarea演示

网站
源代码

结论

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

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

 类似资料: