10款jQuery文本高亮插件

简介: 本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

【编者按】本文作者为 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/

相关文章
|
2天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
34 21
|
3天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
31 16
|
3天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
2天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
2天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
23小时前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
1天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
8 2
|
6天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
32 7
|
7天前
|
JavaScript 前端开发 API
漂亮的jQuery对话框插件Dialogify
这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。
27 7
|
6天前
|
JavaScript
jQuery响应式垂直侧边栏插件rvnm
jQuery响应式垂直侧边栏插件rvnm