jquery实现页面关键词高亮显示的方法
本文实例讲述了jquery实现页面关键词高亮显示的方法。分享给大家供大家参考。具体分析如下：
通过jquery对页面搜索关键词进行高亮显示
支持中文多词页面中高亮显示
1.JavaScript代码如下：
jQuery.fn.extend({
highlight:function(search,configs){
if(typeof(search)=='undefined')return;
varconfigs= jQuery.extend({
insensitive:1,//是否匹配大小写 0匹配1不匹配
hls_class:'highlight',//高亮后的class
clear_last:true,//清除原来高亮的结果
},configs);
if(configs.clear_last){
$(this).find("strong."+configs.hls_class).each(function(){
$(this).after($(this).text());
$(this).remove();
})
}
returnthis.each(function(){
if(typeof(search)=="string"){
$(this).highregx(search,configs);
}elseif(search.constructor===Array){
for(varqueryinsearch){
varsearch_str=$.trim(search[query]);
if(search_str!="")$(this).highregx(search_str,configs);
}
}
});
},
highregx:function(query,configs){
query=this.unicode(query);
varregex=newRegExp("(<[^>]*>)|("+query+")",configs.insensitive?"ig":"g");
this.html(this.html().replace(regex,function(a,b,c){
return(a.charAt(0)=="<")?a:"<strongclass=\""+configs.hls_class+"\">"+c+"</strong>";
}));
},
unicode:function(s){
varlen=s.length;
varrs="";
s=s.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");
for(vari=0;i<len;i++){
if(s.charCodeAt(i)>255)
rs+="\\u"+s.charCodeAt(i).toString(16);
elsers+= s.charAt(i);
}
returnrs;
}
});
2.highlight插件点击此处下载。
希望本文所述对大家的jQuery程序设计有所帮助。