// 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. 本地测试出现:Call to undefined function curl_init()

    网上搜索Call to undefined function curl_init(),清一色的以下解决办法: 1.在php.ini中找到extension=php_curl.dll,去掉前面的,php ...

  2. An internal error occurred during: "Launching MVC on Tomcat 6.x". java.lang.NullPointerException

    有的时候打开Myeclispe莫名奇妙的就出现了这样的问题: An internal error occurred during: "Launching MVC on Tomcat  6.x ...

  3. python 面向对象四 继承和多态

    一.继承 class Animal(object): def run(self): print('Animal is running...') class Dog(Animal): def run(s ...

  4. Android Studio编写运行测试纯java代码可带main()函数

    问题 小伙伴们在做安卓项目的时候,是不是有时候会忘记某些api的使用方法,不太确定他们的结果是怎样的,需要写一些测试代码,验证看看我们的写法是否正确.刚开始的时候我是在页面上写一个Button,添加点 ...

  5. mysql查询流程

    首先是连接器 连接器负责跟客户端来链接 链接成功后 mysql会先去查询缓存,之前是不是有查询的这条语句,之前执行过的话 就会以key-value的形式缓存到内存中,如果没有就会继续执行后面的,执行完 ...

  6. 利用OneDNS同步chrome数据

    将DNS服务器改成OneDNS的 117.50.11.11 备用改为 117.50.22.22 然后刷新自己的DNS缓存,接着测试一下https://test.onedns.net即可 这样既可以正常 ...

  7. 原生javascript实现计时器

    成品图如意下所示: 实现加到等于5的时候停止 搭建HTML结构 minutes:<input type="text" value="0"> seco ...

  8. npm run dev报错--Error: Cannot find module 'yargs-parser'

    Error: Cannot find module 'yargs-parser'  ---报错不知何解??? 百度了很久没找到方法,是缺少“ yargs-parser ”模块,需要安装一下即可:cnp ...

  9. javax.xml.bind.UnmarshalException: 意外的元素 (uri:"", local:"xml")。所需元素为(none)

    将xml转换为object时候报错:javax.xml.bind.UnmarshalException: 意外的元素 (uri:"", local:"xml") ...

  10. QT入门学习2

    QT获取窗口几何布局有2类函数: 1.包含框架:x().y().frameGemetry().pos().move()... 2.不包含框架:geometry().width().height().w ...