介绍一个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()需要将文本的内容作为字符串传入,如果字符串中包含有一些特殊字符例如引号则有可能会导致脚本注入从而影响程序正常运行。考虑过滤特殊字符或者对该方法进行重构?