jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_30388677

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量104

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xingxiudong/archive/2010/06/01/3987018.html

版权

jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器

源码：

jQuery.fn.extend({ highText : function (searchWords, css) { return this.each(function(){ $(this).html(function high(replaced, search, css){ var pattarn = search.replace(//b(/w+)/b/g, "($1)").replace(//s+/g, "|"); return replaced.replace(new RegExp(pattarn, "ig"), function(keyword){ return $("<span>" + keyword + "</span>").css(css).outerHTML(); }); }($(this).text(), searchWords, css)); }); }, outerHTML : function(s) { return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html(); } });

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器 </title> </head> <body> 源字符串：<input name="src" type="text" size="30" value="ABCDEFGHIJKLMNOPQISTUVWXYZ0123456789中华人民共和国" /><br /> 搜索字符串：<input id="sea" name="search" type="text" size="30" /><br /> <div class="h">ABCDEFGHIJKLMNOPQISTUVWXYZ0123456789中华人民共和国</div> <div class="h">ABCDEFG0123456789中华PQISTUVW人民HIJKLMNOXYZ共和国</div> <div class="h">ABCDEFGHIJKLMNOPQI789中华人民STUVWXYZ0123456共和国</div> <div class="h">ABCDKLMNOPQISTUVWXY9中EFGHIJ华人民Z012345678共和国</div> <div class="h">ABCDEFGHUVWXYZ0123456789中华人IJKLMNOPQIST民共和国</div> <div id="h">ABCDEFM89中华TUVWXYZ01人民NOPQIS23GHIJKL4567共和国</div> <input type="button" value="高亮" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("input[type='button']").click(function(){ $(".h").highText($("#sea").val(), {color : "#F00", "font-size" : "150%"}); }); jQuery.fn.extend({ highText : function (searchWords, css) { return this.each(function(){ $(this).html(function high(replaced, search, css){ var pattarn = search.replace(//b(/w+)/b/g, "($1)").replace(//s+/g, "|"); return replaced.replace(new RegExp(pattarn, "ig"), function(keyword){ return $("<span>" + keyword + "</span>").css(css).outerHTML(); }); }($(this).text(), searchWords, css)); }); }, outerHTML : function(s) { return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html(); } }); </script> </body> </html>

转载于:https://www.cnblogs.com/xingxiudong/archive/2010/06/01/3987018.html