实现文本检索加红的JS源码

(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)){//非标签http://www.poposoft.com
     //开始执行替换
     $.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;
      }
     });
     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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值