jQuery插件highlightRegex实现正则表达式匹配高亮显示功能
如果需要在页面元素中查询字符或文本，同时需要高亮显示所有查找到的字符或文本，使用jQuery插件highlightRegex可实现此功能，输入需要匹配的字符或文本的正则表达式，就可以高亮网页中匹配到的文本和字符，效果图如下：
点我查看highlightRegex在线演示[官方演示]
实例测试环境：firefox3.0
使用说明
需要使用jQuery库文件和highlightRegex库文件
使用实例
一，包含文件部分
- <script src="jquery.min.js" type="text/javascript"></script>
- <script src="jquery.highlightRegex.js" type="text/javascript"></script>
二，HTML部分
- <div id="content">This is some text that will be highlighted with the regex <span id='regex'></span></div>
- <a href='#' id='biuuu'>点击增加高亮</a>
其中ID为content的DIV内的内容表示需要正则匹配高亮显示的字符。
三，Javascript部分
- $(function() {
- $('#biuuu').toggle(function(){
- regex = /[aeiou]/ig
- $('#regex').text(regex);
- $('#content').highlightRegex(regex);
- $(this).text("点击清除高亮");
- }, function(){
- $('#content').highlightRegex();
- $(this).text('点击增加高亮');
- })
- });
实现一个点击ID为biuuu的链接增加或清除高亮的效果。
自定义正则表达式部分：regex = /[aeiou]/ig
实现正则高亮匹配部分：$('#content').highlightRegex(regex);
清除正则高亮匹配部分：$('#content').highlightRegex();
如上实例，就实现了一个简单的正则匹配查找元音字母字符并高亮显示的功能，使用jQuery插件highlightRegex还可以实现动态的匹配查找，并对查找的结
果高亮显示，其代码如下：
一，javascript部分
- $('#biuuu').keyup(function(){
- $('#fancy-text').highlightRegex();
- if($(this).val() != '') {
- $('#fancy-text').highlightRegex(new RegExp($(this).val(), 'ig'));
- }
- })
二，HTML部分
- <div id='input'>输入需要高亮的字符或文本: /<input type='text' id='biuuu'/>/ig</div>
只需要在文本框中需要高亮的字母或字符，就能匹配相应的内容，内容部分这里省略，具体大家看看实例演示部分。
点我下载highlightRegex实例源代码
http://jquerycodes.googlecode.com/files/jQuery.highlightRegex.rar
skyworld -