实现效果如下：

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. Shell随机生成字符串

    随机生成18位的字符串,数字 大小写字符 斜线 password=`openssl rand -base64 |-`

  2. Pornhub Web 开发者访谈

    原文:Interview with a Pornhub Web Developer 译者:neal1991 welcome to star my articles-translator, provid ...

  3. 18、nginx优化

    一.性能优化概述 基询imm能优化,那么在性能优化这一章,我们将分为如下几个方面做介绍 1.首先我们需要了解性能优化要考虑哪些方面. 2.然后我们需要了解性能优化必须要用到的压力测试工具ab. 3.最 ...

  4. 第二篇.1、python基础之数据类型与变量

    一.变量 1 什么是变量之声明变量 #变量名=变量值 age=18 gender1='male' gender2='female' 2 为什么要有变量 变量作用:“变”=>变化,“量”=> ...

  5. centos 7 Network 脚本

    #!/bin/sh #主动启动网卡 interface=$() ifup $interface #获取当前网络信息 default_route=$(ip route show) default_int ...

  6. 网络初级篇之配置telnet登录网络设备（实验）

    一.作用     在日常工作中,登录网络设备,对其进行配置主要有几种方式:console.Telnet与ssh.这样可以实现远程(只要网络可达)控制,极大的方便了工作.今天主要讲解一下配置Telnet ...

  7. 自学Python-基于tcp协议的socket

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  8. 时序数据库influxDB存储数据grafana展示数据

    一.influxDB简介 InfluxDB是一款用Go语言编写的开源分布式时序.事件和指标数据库,无需外部依赖.该数据库现在主要用于存储涉及大量的时间戳数据,如DevOps监控数据,APP metri ...

  9. 未能加载文件或程序集“System.Web.Http.WebHost

    http://blog.csdn.net/yuanzhugen/article/details/46625353(转)

  10. java读取word文档，提取标题和内容

    使用的工具为poi,需要导入的依赖如下 <dependency> <groupId>org.apache.poi</groupId> <artifactId& ...