注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

Jquery 文字高亮  

2010-07-13 01:51:51|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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>
<script type="text/javascript" src="http://xiaofeng1982.blog.163.com/blog/js/jquery.min.js"></script>
<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="http://xiaofeng1982.blog.163.com/blog/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>
  评论这张
 
阅读(1897)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017