JavaScript text highlighting JQuery plugin

简介:

介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串。

Demo

  点击下面的两个链接以查看效果:

  点击Remove highlights移除高亮显示。

用法

Add highlight

  下载jquery.highlight-4.js然后添加到页面上,注意前提是页面上已经添加了JQuery的引用。Closure Compiler compressed version (1KB)也可以用。

Style the highlight class

  在CSS中添加你想要高亮显示的效果,如

.highlight { background-color: yellow; }

Highlight terms

  使用JQuery选择器找到需要对应的元素,然后直接调用highlight函数,将需要匹配的文本作为字符串参数传入。如:

$('li').highlight('bla');

Remove highlighting

  调用removeHighlight()可以移除高亮显示的效果。如:

$('#highlight-plugin').removeHighlight();

 

  一个小问题:函数highlight()需要将文本的内容作为字符串传入,如果字符串中包含有一些特殊字符例如引号则有可能会导致脚本注入从而影响程序正常运行。考虑过滤特殊字符或者对该方法进行重构?

原文地址:http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/3627429.html,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
44 1
|
24天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
53 14
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
55 3
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
30 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
15 0
|
2月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
2月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
2月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
86 0
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
4月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
95 4
下一篇
DataWorks