当前位置:  编程技术>jquery

Jquery实现高亮搜索结果

    来源: 互联网  发布时间:2014-09-03

    本文导语:  需求描述: 使用jquery实现高亮搜索结果。 代码:   代码示例: // by zhangxixnu 2010-06-21 http://www.zhangxinxu.com/ // textSearch.js v1.0 文字,关键字的页面纯客户端搜索 // 2010-06-23 修复多字母检索标签破碎的问题 // 2010-06-29 修复页面注...

需求描述:
使用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('',{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 = "+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 = /[^]+|/g;
   var a = v_html.match(tags), test = 0;
   $.each(a, function(i, c){
    if(!//.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.
     });
     c = c.replace(/♂/g,"").replace(/♀/g,"");
     a[i] = c;
    }
   });
   //将支离数组重新组成字符串
   var new_html = a.join("");
  
   $(this).html(new_html);
  
   if(test === 0 && sets.nullReport){
    alert("没有搜索结果");
    return false;
   }
  
   //执行回调函数
   sets.callback();
  });
 };
})(jQuery);

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • JQuery实现元素屏幕居中显示的代码
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • 简单的代码实现jquery定时器
  • jQuery Trim去除字符串首尾空字符的实现方法说明
  • jquery插件开发之实现jquery手风琴功能分享
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery实现的导航固定效果
  • jquery实现点击消失的代码
  • jquery 实现弹出div位于屏幕正中(图文)
  • jquery特效 table鼠标滑过变色的实现代码
  • jquery实现图片路径不存在时进行替换的代码
  • jquery 选择块与改变属性值的实现方法
  • 60秒倒计时的jquery实现代码
  • jquery半透明设置实现代码
  • jquery 实现文本框焦点自动跳转
  • jquery实现弹出层完美居中效果
  • jquery 回车事件的实现代码
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3