首页 > 代码库 > 如何通过js使搜索关键词高亮
如何通过js使搜索关键词高亮
给你推荐通过jquery来实现高亮关键词。jquery.textSearch-1.0.js代码:
- (function($){
- $.fn.textSearch =function(str,options){
- var defaults ={
- divFlag:true,
- divStr:" ",
- markClass:"",
- markColor:"red",
- nullReport:true,
- callback:function(){
- returnfalse;
- }
- };
- var sets = $.extend({}, defaults, options ||{}), clStr;
- if(sets.markClass){
- clStr ="class=‘"+sets.markClass+"‘";
- }else{
- clStr ="style=‘color:"+sets.markColor+";‘";
- }
- //对前一次高亮处理的文字还原
- $("span[rel=‘mark‘]").removeAttr("class").removeAttr("style").removeAttr("rel");
- //字符串正则表达式关键字转化
- $.regTrim =function(s){
- var imp =/[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g;
- var imp_c ={};
- imp_c["^"]="\\^";
- imp_c["."]="\\.";
- imp_c["\\"]="\\\\";
- imp_c["|"]="\\|";
- imp_c["("]="\\(";
- imp_c[")"]="\\)";
- imp_c["*"]="\\*";
- imp_c["+"]="\\+";
- imp_c["-"]="\\-";
- imp_c["$"]="\$";
- imp_c["["]="\\[";
- imp_c["]"]="\\]";
- imp_c["?"]="\\?";
- s = s.replace(imp,function(o){
- return imp_c[o];
- });
- return s;
- };
- $(this).each(function(){
- var t = $(this);
- str = $.trim(str);
- if(str ===""){
- alert("关键字为空");
- returnfalse;
- }else{
- //将关键字push到数组之中
- var arr =[];
- if(sets.divFlag){
- arr = str.split(sets.divStr);
- }else{
- arr.push(str);
- }
- }
- var v_html = t.html();
- //删除注释
- v_html = v_html.replace(/<!--(?:.*)\-->/g,"");
- //将HTML代码支离为HTML片段和文字片段,其中文字片段用于正则替换处理,而HTML片段置之不理
- var tags =/[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
- var a = v_html.match(tags), test =0;
- $.each(a,function(i, c){
- if(!/<(?:.|\s)*?>/.test(c)){//非标签
- //开始执行替换
- $.each(arr,function(index, con){
- if(con ===""){return;}
- var reg =newRegExp($.regTrim(con),"g");
- if(reg.test(c)){
- //正则替换
- c = c.replace(reg,"♂"+con+"♀");
- test =1;
- }
- });
- c = c.replace(/♂/g,"<span rel=‘mark‘ "+clStr+">").replace(/♀/g,"</span>");
- a[i]= c;
- }
- });
- //将支离数组重新组成字符串
- var new_html = a.join("");
- $(this).html(new_html);
- if(test ===0&& sets.nullReport){
- alert("没有搜索结果");
- returnfalse;
- }
- //执行回调函数
- sets.callback();
- });
- };
- })(jQuery);
使用方法是textSearch,具体为:$(选择器). textSearch(String,可选参数)。例如,
- $("body").textSearch("世界杯");
表示的含义就是查询并红色高亮标注body标签下的所有的“世界杯”这个关键字,也就是页面下高亮标注所有的“世界杯”文字。又如:
- $(".test").textSearch("空姐 凤姐 芙蓉姐",{markColor:"blue"});
则表示class中有test样式的所有标签下的“空姐”,“凤姐”,“芙蓉姐”文字用蓝色高亮标注。
我使用的过程为:(需要同时引入下面两个js文件才能正常运行)
<script type="text/javascript" src="http://www.mamicode.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jquery.textSearch-1.0.js"></script>
<script type="text/javascript">
$(function(){
var v = $("#txtSearchKeyword").val(); //获取id为txtSearchKeyword的text值赋给v
$("#searchTextTest").textSearch(v); //将id为searchTextTest的文本中包含v的高亮显示
return false;
});
</script>
详细用法请参考:http://www.zhangxinxu.com/wordpress/?p=888