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