实现效果如下：

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. 用SVM处理XSS时，数据清洗打标数据标准化处理的方法和意义

    def get_len(url): return len(url) def get_url_count(url): if re.search('(http://)|(https://)', url, ...

  2. Tomcat配置JNDI

    JNDI是什么?使用JNDI有什么好处? JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一. 我个人对j ...

  3. MySQL之RPM安装说明及配置

    1.查看当前系统是否安装过Linux rpm -qa | grep -i mysql 未安装无任何输出:安装会打印对应mysql的rpm安装包. 2.准备安装包: MySQL-client-5.5.4 ...

  4. 点击切换JS

    $(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...

  5. 从FBV到CBV一（开始）

    span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror ...

  6. php不重新编译，添加模块

    本文已安装mysqli模块为例 一:检查 1:首先保证php-fpm能正常启动 2:查看当前已安装的php模块是否有mysqli [root@oldboyedu ~]# /application/ph ...

  7. orm之peewee

    peewee是一款orm框架,为什么选择peewee,是因为它比较简单和Django比较类似,而且还有一个async-peewee,可以进行异步化. 如何定义model和生成表 ''' 我们要定义两张 ...

  8. HDU - 6393 Traffic Network in Numazu (基环树+树链剖分/LCA)

    题意:给定一个带权边无向基环树,有两种操作,一种是改变某个边的权值,另一种是询问两点间的最短路径. 可以对环进行缩点,以环为根建立一棵新树,并记录与环相连的所有点和环上的哪个点相连,将路径分为环外和环 ...

  9. python进阶ing——创建第一个Tornado应用

    python进阶ing——创建第一个Tornado应用 分类: Python2013-06-02 23:02 1725人阅读 评论(2) 收藏 举报 pythonTornado 每天在群里跟很多群友讨 ...

  10. cookie和session django中间件

    目录 一.cookie和session 1. 为什么要有cookie和session 二.cookie 1. 什么是cookie 2. django中关于cookie的使用 (1)后端设置cookie ...