实现效果如下：

demo.html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

     <title>serch</title>

     <script type="text/javascript" src="http://www.roseonly.com.cn/scripts/jquery.min.js"></script>

     <script type="text/javascript" src="jquery.textSearch-1.0.js"></script>

 </head>

 <body>

 <script>

 function ss_search(){

     $("body").textSearch($('#text').val(),{callback:function(){

         $('body').scrollTop($('span[rel=mark]').offset().top);

     }});

 }

 </script>

 <input type="text" id="text"/> <a href="javascript:void(0);" onClick="ss_search();">搜索</a>

 <p>

 输入我的字符

 </p>

 输入我的字符

 <p>

 输入我的字符

 </p>

 </body>

 </html>

jquery.textSearch-1.0.js

 // by zhangxixnu 2010-06-21  welcome to visit my personal website http://www.zhangxinxu.com/

 // 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,"<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);

html实现高亮检索的更多相关文章

  1. Lucene的多域查询、结果中查询、查询结果分页、高亮查询结果和结果评分

    1.针对多个域的一次性查询 1.1.三种方案     使用lucene构造搜索引擎的时候,如果要针对多个域进行一次性查询,一般来说有三种方法:     第一种实现方法是创建多值的全包含域的文本进行索引 ...

  2. Elasticsearch及java客户端jest使用

    本文使用Github中的Elasticsearch-rtf,已经集成了众多的插件,例如必须使用的中文分词等,可以简单的通过配置来启用中文分词.本文主要分为以下几部分: 1.配置和启用中文分词: 2.定 ...

  3. scrapy+Lucene搭建小型搜索引擎

    Reference: http://blog.csdn.net/napoay/article/details/51477586 一.选题 工程类搜索型: 定向采集 3-4 个新闻网站, 实现这些网站信 ...

  4. ES 07 - Elasticsearch查询文档的六种方法

    目录 1 Query String Search(查询串检索) 2 Query DSL(ES特定语法检索) 3 Query Filter(过滤检索) 4 Full Text Search(全文检索) ...

  5. es简单打造站内搜索

    最近挺忙的,在外出差,又同时干两个项目.白天一个晚上一个,特别是白天做的项目,马上就要上线了,在客户这里 三天两头开会,问题很多真的很想好好静下来怼代码,半夜做梦都能fix bugs~ 和客户交流真的 ...

  6. ElasticSearch入门介绍一

    ElasticSearch 关于es的几个概念: 集群:多个运行es节点可以组成一个集群,它们拥有相同的cluster.name. 节点:运行es的实例 索引:相当于数据库database,一个集群可 ...

  7. Elasticsearch系列---常见搜索方式与聚合分析

    概要 本篇主要介绍常见的6种搜索方式.聚合分析语法,基本是上机实战,可以和关系型数据库作对比,如果之前了解关系型数据库,那本篇只需要了解搜索和聚合的语法规则就可以了. 搜索响应报文 以上篇建立的mus ...

  8. 大数据-es(elasticsearch)

    elasticsearch elasticsearch是lucene作为核心的实时分布式检索,底层使用倒排索引实现. 倒排索引原理 索引表中的每一项都包括一个属性值和具有该属性值的各记录的地址.由于不 ...

  9. Elastic认证考试，请先看这一篇

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/wojiushiwo987/article ...

随机推荐

  1. 中文转拼音，pinyin4j实用示例

    Pinyin4j是一个流行的Java库,支持中文字符和拼音之间的转换.拼音输出格式可以定制. Support Chinese character (both Simplified and Trandi ...

  2. apply,call 和 bind 有什么区别

    三者都可以把函数应用到其他对象上,不是自身对象,apply,call是直接执行函数调用,bind是绑定,执行需要再次调用,apply和call的区别是apply接受数组作为参数,而call是接受逗号分 ...

  3. java基础2(Map)

    1.请简述Map 的特点 Map每个元素由键与值两部分组成 Map键不能重复,每个键对应一个值 键和值可以为null 2.说出Entry键值对对象遍历Map集合的原理. Map中存放的是两种对象,一种 ...

  4. iOS资料大全

    1.创建自己的Xcode 模板类工程 https://mp.weixin.qq.com/s?__biz=MzAxMzE2Mjc2Ng==&mid=2652155923&idx=1&am ...

  5. java并发编程：锁的相关概念介绍

    理解同步,最好先把java中锁相关的概念弄清楚,有助于我们更好的去理解.学习同步.java语言中与锁有关的几个概念主要是:可重入锁.读写锁.可中断锁.公平锁 一.可重入锁 synchronized和R ...

  6. shelve：极其强大的序列化模块

    介绍 数据持久化,就是把数据从内存刷到磁盘上.但是要保证在读取的时候还能恢复到原来的状态.像pickle和json之类的持久化模块基本上无需介绍了,这里介绍两个其他很少用但是功能很强大的模块. dbm ...

  7. Linux 查看主机、CPU、内存、内核、网卡或MAC地址、关机、重启、当前使用人、网络连接状态、主机目前使用状态

    7 uname -a 显示主机名.内核.硬件结构等全部信息 unmae -r 只显示内核 查看Redhat和centos的内核版本也可以用cat /etc/redhat-release 或cat /e ...

  8. JavaScript中数组元素删除的七大方法汇总

    原文链接:https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中,除了Object之外,Array类型恐怕就是最常 ...

  9. VScode VUE+PYTHON习惯用的编辑器

    本人从事运维开发工作,经常要开发一些web系统工具,这就需要用到前后端开发.vscode是我用得最舒服的一种编辑器,前端后端都习惯在上面写,这里记录一些配置. 一,插件安装 目前我最主要用的是:    ...

  10. UVA - 1649 Binomial coefficients (组合数+二分)

    题意:求使得C(n,k)=m的所有的n,k 根据杨辉三角可以看出,当k固定时,C(n,k)是相对于n递增的:当n固定且k<=n/2时,C(n,k)是相对于k递增的,因此可以枚举其中的一个,然后二 ...