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()需要将文本的内容作为字符串传入,如果字符串中包含有一些特殊字符例如引号则有可能会导致脚本注入从而影响程序正常运行。考虑过滤特殊字符或者对该方法进行重构?
JavaScript text highlighting JQuery plugin的更多相关文章
- Native Fullscreen JavaScript API (plus jQuery plugin)
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...
- The ultimate jQuery Plugin List(终极jQuery插件列表)
下面的文章可能出自一位奥地利的作者, 列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- jQuery plugin: Autocomplete 参数及实例
官网:jQuery plugin: Autocomplete (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...
- jQuery plugin : jqTransform
Usage 1- Add javascript inclusion in the header section of your web page //required <script type= ...
- [jQuery] 自做 jQuery Plugin - Part 1
有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...
- 30款javascript脚本插件 jquery插件大全
Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- HTML5 Video player jQuery plugin
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...
随机推荐
- Linux(centos)系统各个目录的作用详解
Linux(centos)系统各个目录的作用详解 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码 ...
- OC 框架组织架构图
- spring junit
转载自 http://blog.csdn.net/funi16/article/details/8691575 在写单元测试的时候,一般是对数据库进行增删改查的操作,这个时候,如果之前删除了某条记录, ...
- 解决方法:An error occurred on the server when processing the URL. Please contact the system administrator
在WINDOWS7或SERVER2008上安装了IIS7.5,调试ASP程序时出现以下错误: An error occurred on the server when processing the U ...
- Python 包的相对导入讲解
[Python 包的相对导入讲解] 参考:http://www.dai3.com/python-import.html
- iOS模拟器设置输入中文
1.打开模拟器,选择Settings; 2.选择General ->KeyBoard ->KeyBoards,选择中文输入法Chinese(Simplified)即可 以前尝试试了很多方 ...
- Linux系统编程-setitimer函数
功能:linux系统编程中,setitimer是一个经常被使用的函数,可用来实现延时和定时的功能. 头文件:sys/time.h 函数原型: int setitimer(int which, cons ...
- UIImageView、UISlider、UISwitch、UIStepper、UISegmentControl
UIImageView——图像视图 作用:专门用来显示图片的控件 . 设置图像 [self.imageView setImage:[UIImage imageNamed:@"abc.png& ...
- js取最小最大值--Math.min()、math.max()
一.Math.min() 返回一组表达式中最小者 eg: var n = Math.min( 2 , 30 ,1 , 200-10 , 300*22 , 20-30 ); alert(n); //打印 ...
- JavaScript 中2个等号与3个等号的区别
首先,== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 下面分别说明: 先说 === ...