Jquery实现高亮搜索结果

发布时间:2019-08-18编辑:脚本学堂
本文介绍下,借助jquery实现搜索结果高亮显示的方法,有需要的朋友参考下。

需求描述:
使用jquery实现高亮搜索结果。

代码:
 

复制代码 代码示例:
// by zhangxixnu 2010-06-21 http://www.zhangxinxu.com/
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索
// 2010-06-23 修复多字母检索标签破碎的问题
// 2010-06-29 修复页面注释显示的问题
/*
    示例:
     $(document).ready(function () {
        $('.content').textSearch('<%=this.key %>',{markColor: "Red"});
     });
*/
(function($){
 $.fn.textSearch = function(str,options){
  var defaults = {
   divFlag: true,
   divStr: " ",
   markClass: "",
   markColor: "red",
   nullReport: true,
   callback: function(){
    return false;
   }
  };
  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("关键字为空");
    return false;
   }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 = new RegExp($.regTrim(con), "g");
      if(reg.test(c)){
       //正则替换
       c = c.replace(reg,"♂"+con+"♀");
       test = 1;
      } // www.jb200.com
     });
     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("没有搜索结果");
    return false;
   }
  
   //执行回调函数
   sets.callback();
  });
 };
})(jQuery);