文档章节

10款jQuery文本高亮插件

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/06/03 14:14
字数 1114
阅读 47
收藏 2

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

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换。 1. InnerFade 这是一个基于jQuery的小插件,可以实现页面内的元素淡入...

红薯
2011/12/15
1K
2
jQuery Highlighter v1.0.0 发布

项目简介 jQuery Highlighter 是一个用来高亮显示文本关键字的 jQuery 插件。 项目主页:http://github.com/XuJinNet/jQuery-Highlighter 在线测试页面:http://xujinnet.github.com/jQuery...

徐徐前进
2010/10/23
1K
0
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.2K
0
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
577
2
10款刚出炉的 jQuery 特效插件

5月份,又有一批优秀的jQuery特效插件新鲜出炉了! 下面要介绍的10款jQuery插件,涉及到地图、画廊、幻灯等特效,希望你能喜欢。 1. bxSlider 该插件是内容滑块和幻灯特效。在线演示点击 he...

小卒过河
2011/05/13
12K
11

没有更多内容

加载失败,请刷新页面

加载更多

读书笔记:深入理解ES6 (五)

第五章 解构:使数据访问更便捷 第1节 为什么使用解构功能?   在ES5中,开发者们从对象、数组中获取特定数据并赋值给变量,编写了很多看起来同质化的代码。例如: 1 let options = {2 ...

张森ZS
20分钟前
18
0
CentOS7 yum方式安装MySQL5.7

在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB。 1 下载并安装MySQL官方的 Yum Repository [root@localho...

roockee
29分钟前
14
0
Allegro三种自定义设置快捷键的方法

Allegro自定义设置快捷键的三种方法: 1、在Allegro PCB editor 命令窗口直接定义 2、通过修改用户变量env文件来设置快捷键 3、定义笔画为快捷键 1、在Allegro PCB editor 命令窗口直接定义 ...

demyar
33分钟前
15
0
如何做一张能让人眼前一亮的大屏?

作为在职场驰骋的社会人,提到数据可视化大家应该都不陌生了。数据可视化的作用也不用我多说,主要是利用图形化手段,更清晰直观地将数据展示。多层次、交互式的可视化分析能够方便决策者理解...

朕想上头条
34分钟前
8
0
TL138/1808/6748-EthEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EthEVM是广州创龙基于SOM-TL138/1808/6748核心板开发的一款开发板,具有三个网络接口。由于SOM-TL138/1808/6748核心板管脚兼容,所以此三个核心板共用同一个底板。开发板采用...

Tronlong创龙
38分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部