JavaScript text highlighting JQuery plugin

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

Demo

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

• highlight
• javascript

　　点击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