实现效果如下：

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. 关于IDEA顶部栏隐藏问题,

    那天手残,点到了 IDEA顶部菜单栏 > View > Appearance >Main Menu ,然后取消了勾选 然后就成了这个样子,没了顶部栏,恢复不过来,不知道如何进行设置 ...

  2. 常用数据存储格式之xml

    常用数据存储格式介绍 XML 被设计用来传输和存储数据,其焦点是数据的内容. HTML 被设计用来显示数据,其焦点是数据的外观. 语法规则: XML 文档必须有一个根元素 XML元素都必须有一个关闭标 ...

  3. php检测函数是否存在函数 function_exists

    php检测函数是否存在函数 function_exists 语法 bool function_exists ( string $function_name )检查的定义的函数的列表,同时内置(内部)和 ...

  4. google guava工具包

    guava这个工具包里有好多有用的工具类 <dependency> <groupId>com.google.guava</groupId> <artifact ...

  5. 使用Hbuilder打包app

    使用Hbuilder来打包自己的H5项目 第一步 在Hbuilder上新建一个"移动APP"wolf(项目命名随意)(如果没用引用mui框架的东西,"选择模板" ...

  6. hiho #1469 : 福字（dp）

    #1469 : 福字 时间限制:6000ms 单点时限:1000ms 内存限制:256MB 描述 新年到了,你收到了一副画.你想找到里面最大的福字. 一副画是一个n × n的矩阵,其中每个位置都是一个 ...

  7. 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开

    使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...

  8. selenium环境搭建：Error: could not find java.dll 报错问题

    搭建java环境,参照其他的安装步骤,搭建即可. 问题:出现如下报错信息. Error: could not find java.dll Error: Could not find Java SE R ...

  9. wx小程序知识点（六）

    六.生命周期 (1)onLoad    —— 加载时触发,只调用一次,可用来发送请求绑定数据.获取url中参数 (2)onShow   —— 页面显示时触发,每次显示都会执行,用来获取需要频繁更新的数 ...

  10. k8s命令自动补全

    Linux yum install -y bash-completion source /usr/share/bash-completion/bash_completion source <(k ...