// textSearch.js v1.0 文字,关键字的页面纯客户端搜索
// 2010-06-23 修复多字母检索标签破碎的问题
// 2010-06-29 修复页面注释显示的问题
// 2013-05-07 修复继续搜素关键字包含之前搜索关键字没有结果的问题
// 不论何种情况,务必保留作者署名。

(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']").each(function() {
var text = document.createTextNode($(this).text());
$(this).replaceWith($(text));
});

//字符串正则表达式关键字转化
$.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;
}
});
c = c.replace(/♂/g,"<mark "+clStr+">").replace(/♀/g,"</mark>");
a[i] = c;
}
});
//将支离数组重新组成字符串
var new_html = a.join("");

$(this).html(new_html);

if(test === 0 && sets.nullReport){
alert("没有搜索结果");
return false;
}

//执行回调函数
sets.callback();
});
};
})(jQuery);

//实例

/**

$("#searchTextTest") 为整个div区域

**/

<script>
  $("form").submit(function(){
  var v = $("#txtSearchKeyword").val();
  $("#searchTextTest").textSearch(v);
  return false;
  });
  </script>

关键字搜索高亮jQuery插件的更多相关文章

  1. 关键字搜索:jQuery过滤器插件fastLiveFilter||显示结果条数

    引用js库 <script src="jquery-1.6.4.min.js"></script> <script src="jquery. ...

  2. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  3. 转 常用JQuery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  4. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  5. 241个jquery插件—jquery插件大全

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  6. jquery插件集合

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  7. (GoRails)在导航栏增加自动的搜索功能(jquery插件:easyautocomplete)(gem 'ransack' 搜索对象4000✨)

    Global Autocomplete Search 需要用到一个JQuery插件和一个搜索对象的gem EasyAutocomplete jQuery插件: https://github.com/p ...

  8. react项目中实现搜索关键字呈现高亮状态(一)

    最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...

  9. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

随机推荐

  1. UVa 1213 Sum of Different Primes (DP)

    题意:给定两个数 n 和 k,问你用 k 个不同的质数组成 n,有多少方法. 析:dp[i][j] 表示 n 由 j 个不同的质数组成,然后先打表素数,然后就easy了. 代码如下: #pragma ...

  2. PHP中的连贯操作

    连贯操作有什么好处?就是多行操作可以在一行之内完成,要进行连贯操作的方法必须返回$this,也就是当前类的对象实例,然后就可以进行连贯操作了,具体的实现代码如下所示. <?php /** * p ...

  3. ajax异步请求后台数据处理

    $.ajax({ type: "POST", url: "./rule/list/device/list", data: JSON.stringify(obj) ...

  4. Python——nose实例示例

    1. 脚本示例: 执行结果: 2. 脚本示例: 执行结果: 由以上截图可以看出执行顺序: 大体可以得出如下结论: 1)测试的顺序总体上按照包—>模块—>类的顺序进行: 2) 然后按照测试用 ...

  5. flask请求访问数据

    flask请求访问数据 在flask框架中,访问请求数据由全局的request对象来提供,在flask框架中,request对象具有 全局作用域: from flask import request ...

  6. asp.net core连接sqlserver

    开发环境:win7,vs2017,sqlserver2014 vs上建立一个asp.net core web项目和一个.net core的类库项目DBA 简单起见,在DBA项目中就一个类SqlServ ...

  7. 转【Python】Python-skier游戏[摘自.与孩子一起学编程]

    http://www.cnblogs.com/zhaoxd07/p/4914818.html 我遇到的问题 问题1 self.image=pygame.image.load("skier_d ...

  8. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  9. Jquery操作常用表单元素

    由于对前端的东西不是很熟练,导致jquery操作表单的东西总是忘记,每次用都要查一下,效率低下,记录下来,以便下次使用. CheckBox checkbox改变事件 $('#IsAllSearch') ...

  10. Kickstart Round D 2017 : A

    思路: 动态规划. large数据的时间范围很大,无法设计入状态中.转换思路为定义dp[i][j]为当前在景点i,并且已经游览了j个景点所花费的最小时间,这种思想与leetcode45类似.于是转移方 ...