首页 > 代码库 > 如何通过js使搜索关键词高亮

如何通过js使搜索关键词高亮

      给你推荐通过jquery来实现高亮关键词。jquery.textSearch-1.0.js代码:

  1. (function($){
  2.     $.fn.textSearch =function(str,options){
  3.         var defaults ={
  4.             divFlag:true,
  5.             divStr:" ",
  6.             markClass:"",
  7.             markColor:"red",
  8.             nullReport:true,
  9.             callback:function(){
  10.                 returnfalse;  
  11.             }
  12.         };
  13.         var sets = $.extend({}, defaults, options ||{}), clStr;
  14.         if(sets.markClass){
  15.             clStr ="class=‘"+sets.markClass+"‘";  
  16.         }else{
  17.             clStr ="style=‘color:"+sets.markColor+";‘";
  18.         }
  19.        
  20.         //对前一次高亮处理的文字还原
  21.         $("span[rel=‘mark‘]").removeAttr("class").removeAttr("style").removeAttr("rel");
  22.        
  23.        
  24.         //字符串正则表达式关键字转化
  25.         $.regTrim =function(s){
  26.             var imp =/[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g;
  27.             var imp_c ={};
  28.             imp_c["^"]="\\^";
  29.             imp_c["."]="\\.";
  30.             imp_c["\\"]="\\\\";
  31.             imp_c["|"]="\\|";
  32.             imp_c["("]="\\(";
  33.             imp_c[")"]="\\)";
  34.             imp_c["*"]="\\*";
  35.             imp_c["+"]="\\+";
  36.             imp_c["-"]="\\-";
  37.             imp_c["$"]="\$";
  38.             imp_c["["]="\\[";
  39.             imp_c["]"]="\\]";
  40.             imp_c["?"]="\\?";
  41.             s = s.replace(imp,function(o){
  42.                 return imp_c[o];                      
  43.             });
  44.             return s;
  45.         };
  46.         $(this).each(function(){
  47.             var t = $(this);
  48.             str = $.trim(str);
  49.             if(str ===""){
  50.                 alert("关键字为空");
  51.                 returnfalse;
  52.             }else{
  53.                 //将关键字push到数组之中
  54.                 var arr =[];
  55.                 if(sets.divFlag){
  56.                     arr = str.split(sets.divStr);  
  57.                 }else{
  58.                     arr.push(str);  
  59.                 }
  60.             }
  61.             var v_html = t.html();
  62.             //删除注释
  63.             v_html = v_html.replace(/<!--(?:.*)\-->/g,"");
  64.            
  65.             //将HTML代码支离为HTML片段和文字片段,其中文字片段用于正则替换处理,而HTML片段置之不理
  66.             var tags =/[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
  67.             var a = v_html.match(tags), test =0;
  68.             $.each(a,function(i, c){
  69.                 if(!/<(?:.|\s)*?>/.test(c)){//非标签
  70.                     //开始执行替换
  71.                     $.each(arr,function(index, con){
  72.                         if(con ===""){return;}
  73.                         var reg =newRegExp($.regTrim(con),"g");
  74.                         if(reg.test(c)){
  75.                             //正则替换
  76.                             c = c.replace(reg,"♂"+con+"♀");
  77.                             test =1;
  78.                         }
  79.                     });
  80.                     c = c.replace(/♂/g,"<span rel=‘mark‘ "+clStr+">").replace(/♀/g,"</span>");
  81.                     a[i]= c;
  82.                 }
  83.             });
  84.             //将支离数组重新组成字符串
  85.             var new_html = a.join("");
  86.            
  87.             $(this).html(new_html);
  88.            
  89.             if(test ===0&& sets.nullReport){
  90.                 alert("没有搜索结果");    
  91.                 returnfalse;
  92.             }
  93.            
  94.             //执行回调函数
  95.             sets.callback();
  96.         });
  97.     };
  98. })(jQuery);

 

   

使用方法是textSearch,具体为:$(选择器). textSearch(String,可选参数)。例如,

  1. $("body").textSearch("世界杯");
 

表示的含义就是查询并红色高亮标注body标签下的所有的“世界杯”这个关键字,也就是页面下高亮标注所有的“世界杯”文字。又如:

  1. $(".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