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

JavaScript text highlighting JQuery plugin相关推荐

超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
JavaScript强化教程——jQuery选择器
本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器选择器实例选取 * $("*") 所 ...
html5 jquery paint plugin,制作高质量的JQuery Plugin 插件的方法
JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插 ...
Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项，Jquey官方推荐)
原文链接:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ 原文作者:remy sharp So far ...
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
修改input的text 通过jquery的html获取值未变化
修改input的text 通过jquery的html获取值未变化扩展一个方法 ,通过formhtml()来取代html() (function ($) {var oldHTML = $.fn.ht ...
Dom对象、JavaScript对象、jQuery对象区别
一.Dom对象.JavaScript对象.jQuery对象 1.1 Dom对象文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型 ...
jQuery 对话框 jQuery.plugin
jQuery 对话框 jQuery.plugin 强烈推荐对话框插件jquery.weebox.js,本站开源账务管理系统中使用的对话框组件,各种形式的对话框:确认.成功.警告.错误等 ---- 如下 ...

JavaScript text highlighting JQuery plugin

JavaScript text highlighting JQuery plugin相关推荐

最新文章

热门文章