纯客户端页面关键字搜索高亮jQuery插件

这篇文章发布于 2010年06月22日，星期二，20:01，归类于 jQuery相关。 阅读 136619 次, 今日 4 次 47 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=888

一、效果抢鲜展示

此插件是我今天下午写的，为了直观地看到是个什么东东，先展示效果，您可以狠狠地点击这里：搜索页面文字jQuery插件Demo

下图为Demo页面的两个测试截图 – 测试页面HTML代码取自豆瓣网帮助页面：

搜索插件搜索name结果 张鑫旭-鑫空间-鑫生活搜索豆瓣后的页面效果 张鑫旭-鑫空间-鑫生活

下载
您可以狠狠地点击这里：jquery.textSearch-1.0.js
文件较小，功能简单，恕不打包~~

二、功能简述

从上图也应该看出来了，就是对HTML页面上的文字内容进行高亮标记，这个可以用在内容搜索上。纯粹的客户端程序，与后台一点瓜葛都没有。

三、如何使用

使用方法是textSearch，具体为：$(选择器). textSearch(String,可选参数)。例如，

$("body").textSearch("世界杯");

表示的含义就是查询并红色高亮标注body标签下的所有的“世界杯”这个关键字，也就是页面下高亮标注所有的“世界杯”文字。又如：

$(".test").textSearch("空姐 凤姐 芙蓉姐",{markColor: "blue"});

则表示class中有test样式的所有标签下的“空姐”，“凤姐”，“芙蓉姐”文字用蓝色高亮标注。
此方法中，有一个参数是必须的，就是你要搜索的关键字字符串（默认状况下，使用空格隔开可表示多个关键字），还有一个可选参数，可自定义一些样式，关键字处理方法，回调函数等，具体参见本文下一部分。

四、一些可选参数

参见下表：

参数 默认值 说明
divFlag true 布尔型，true表示对字符串进行多关键字处理，false表示不处理，整个字符串看成1个关键字
divStr " " 字符串，表示分割多个关键字的字符，默认为空格，如果divFlag为false，此参数将失效
markClass "" 代码高亮的class类，默认为没有样式，如果设置样式，将覆盖默认的红色高亮颜色值
markColor "red" 字符串，指高亮文字的颜色值，默认红色。markClass不为空，则此参数失效。
nullReport true 布尔型，表示当搜索结果为空时，是否弹出提示信息。默认弹出。
callback return false; 回调函数，默认无效果。当存在搜索结果时执行。

其他一些说明：
1. 高亮的文字的jQuery对象可以通过$("span[rel='mark']")获取。
2. 支持中英文和各类字符搜索，支持多关键字搜索。

多关键字搜索的截图 张鑫旭-鑫空间-鑫生活

五、结勒个语

抬头一看，文章短短的，妥妥的。js文件很小，加上注释不足100行，难点在于稍稍复杂的正则表达式和一些相应的字符串处理！最后，本人还是颗成长期的小菠菜，资历有限，出现问题难免。欢迎指出，不甚感谢。或者您有更好的搜索实现方案，也非常欢迎提出，交流。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=888

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , , , , , , ,


发表评论（目前47 条评论）

  1. hefeng6500说道：
    2018年03月27日 17:06

    第一次搜索关键词能正常高亮，当第二次搜索关键词的时候，第一次的关键词没有去除高亮

    回复
  2. 搜记网说道：
    2017年05月19日 11:25

    这个js插件可以结合lucene分词使用，效果更加好。

    回复
  3. 请问说道：
    2017年05月11日 11:36

    请问，如果方法使用多次的话，会被最后一次所替换，现在想实现每次关键词以不同颜色显示，该如何实现？谢谢

    回复
  4. 崔悦说道：
    2017年04月10日 18:35

    你好，我把你这个代码修改了一下，想传几个不同的关键字进去，用的for循环然后用变量代替的，怎么只能显示最后的那个变量变色啊？

    回复
  5. 图片地址匹配上就悲剧了说道：
    2017年02月28日 18:43

    内容含有图片，地址含有关键字，悲剧了。。

    回复
  6. 嗷大喵说道：
    2016年10月28日 14:08

    使用该js后，导致页面clikc事件全部失效

    回复
  7. gai说道：
    2016年09月17日 18:35

    如何使页面直接定位到高亮的地方？类似于浏览器的Ctrl+F

    回复
  8. laijbin说道：
    2015年05月21日 17:59

    demo页面jQuery没找到，’jQuery is not defined’

    回复
  9. 陈旭说道：
    2015年03月5日 14:24

    关于大小写的问题，抽时间改了一下，但是搜索结果包含关键词的地方会被替换成小写哦。

    将 JS 文件中第 80 – 95 行的内容替换成

    if(!//.test(c)){//非标签
    //开始执行替换
    c = c.toLowerCase();
    $.each(arr,function(index, con){
    con = con.toLowerCase();
    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,””).replace(/♀/g,””);
    a[i] = c;
    }

    回复
  10. 文艺青年说道：
    2014年11月3日 17:20

    have a bug~

    回复
  11. 大志说道：
    2014年06月4日 22:36

    匹配HMTL注释那个有问题， 换成这个就成了。
    v_html = v_html.replace(/<!–[\w\W\r\n]*?–>/gmi, ”)

    回复
  12. wjf说道：
    2014年03月14日 17:01

    如果是abcdefgh 我搜索 abcdefgh 就不会出来结果。

    回复
  13. storm说道：
    2013年10月29日 14:37

    可以锻炼下字符串函数的应用，不过这种插件其实没什么必要再做了，ctrl+f,浏览器的高亮比网页方便多了，并且不会影响到dom结构和事件。

    回复
  14. DrWeb说道：
    2013年03月22日 17:22

    英文高亮匹配时是必须区分大小写的，比如我搜索“unix”（全是小写），返回的结果里如果有“Unix”（开头的字母大写），结果的“Unix”是不会高亮的，一定要传入Unix才行，不知道有什么解决办法？

    回复
    • 七十八加九说道：
      2013年10月30日 11:18

      這個你完全可以通過強制大小寫來做。帶個參考網址：http://blog.163.com/wu_jie47/blog/static/1348972262012319101230660/

      回复
  15. 求代码,下载的有乱码说道：
    2013年01月29日 10:27

    这功能很吊,我点那js下下的东西里有乱码,比如注释,和alert内的内容有乱码,能发一份代码到我邮件吗?
    553030761@qq.com

    回复
    • 七十八加九说道：
      2013年10月30日 11:19

      改一下你瀏覽器的編碼，改為UTF-8就可以了···或者找個文本編輯器改也行·

      回复
  16. david说道：
    2012年12月5日 10:18

    选择class时，只能选择第一个，这个问题应该比较好解决吧

    回复
  17. wangdan说道：
    2012年08月31日 09:35

    你写的这个插件和jQuery Highlighter有一样的通病就是，比如a标签原本就有click事件，搜索之后高亮了，但事件却没了
    请解释

    回复
  18. guest说道：
    2012年07月30日 14:14

    好用，十分感谢

    回复
  19. test说道：
    2012年05月2日 11:28

    你写的这个插件和jQuery Highlighter有一样的通病就是，比如a标签原本就有click事件，搜索之后高亮了，但事件却没了

    回复
  20. 彭彭说道：
    2012年03月21日 17:57

    用了你的这个高亮，发现几个问题，请指教，你的这个插件选择器能选择class吗，比如.aa，我把http://www.zhangxinxu.com/study/201006/front-client-keyword-search.html 文件中的id换成class，发现 不起作用。第二，这个插件在ie6下和DD_belatedPNG.js处理png图片的js有严重冲突

    回复
  21. 牛牛说道：
    2011年10月24日 16:03

    已经搞定！replace方法，第2个参数，使用 “♂$&♀” 来代替 “♂”+con+”♀”

    回复
  22. 牛牛说道：
    2011年10月24日 11:30

    你好，现在你做的这个是区分大小写的，如何做到不区分大小写呢？

    回复
  23. cinron说道：
    2011年08月14日 16:30

    插件做的真的不错，比jquery网站里的小巧，还好用，不过你这个插件好像和jquery.tablesorter不兼容，使用这个插件的情况下，用tablesorter进行表格排序，在没有分页，只有一页数据的情况下，点击表头排序无反应，Jquery.highlight.js就没有这个问题

    回复
  24. 建議说道：
    2010年12月28日 10:57

    建議加上簡繁體互轉 比如文本框輸入繁體字 也可以檢索到簡體的

    回复
  25. greennba99说道：
    2010年12月1日 08:37

    To 冰剑：

    字母区分大小写这种需求对于搜索引擎来说一般很少见，至少默认情况下是不会区分的，例如 Google、 百度……

    回复
  26. 冰剑说道：
    2010年11月30日 17:20

    字母 需分大小写。。

    回复
  27. greennba99说道：
    2010年10月28日 08:36

    这个插件是可以高亮的。

    这个也不错，你可以试试： jQuery 关键字高亮插件 – jQuery Highlighter

    http://blog.csdn.net/XuJinNet/archive/2010/10/23/5960678.aspx

    回复
  28. 匿名说道：
    2010年10月27日 11:51

    怎么达不到高亮的效果啊

    回复
  29. IT DAIMON说道：
    2010年10月15日 17:16

    呵呵，OK，我相信这插件你一定会越做越好的！！！！

    回复
  30. IT DAIMON说道：
    2010年10月15日 15:29

    对了，不知对于那些 HTML 实体字符是否能够匹配得到，例如 等字符，他们在 HTML 代码中体现为 &lt 和 ≷。

    回复
  31. IT DAIMON说道：
    2010年10月15日 14:29

    任然有点问题，建议改进一下：
    Demo 页面中有一句话：“页面上有大小两张头像图片……”，如果单独搜索“页面”，能够正常高亮，如果搜索“页面 面上”两个关键词，“页面”两个字被高亮了，“上”字没有被高亮，然后再单独搜索“面上”，这时就搜索不到了。

    建议向 Google 那样，当多个关键字重叠时，那些关键字都一起高亮显示。

    非常感谢你的插件！！！！

    回复
  32. Jiang说道：
    2010年08月27日 19:49

    呵呵，不错，在用
    等过了这两天，我也写个类似的功能哈
    主要考虑到：
    1.大小写的问题，Wordpress和wordpress的高亮不一致
    2.对Wordpress搜索页面的截断显示（当然这是php的，呵）
    3.搜索引擎过来的关键字，可以做一点东西，点一下高亮字可以调用wordpress的搜索哈（这个已经实现了）

    Thanks for sharing anyway!

    回复
  33. yiqing95说道：
    2010年08月23日 20:17

    好东西 我做了php端的但出现乱码 你这个帮忙了 呵呵呵

    回复
  34. 发仔说道：
    2010年06月29日 09:11

    还是有bug，我输入“id“搜索后，再输入i，则找不到。

    27行代码：
    $(“span[rel=’mark’]”).removeAttr(“class”).removeAttr(“style”).removeAttr(“rel”);;
    可建议改为
    $(“span[rel=’mark’]”).children().eq(0).upwrap();

    回复
  35. River说道：
    2010年06月23日 17:53

    做的很好，哈哈，支持一下。

    回复
  36. River说道：
    2010年06月23日 13:45

    有bug，我输入“e d”会出现一些代码

    回复