示例代码，关键位置做了注释，请查看代码：

  1. <html>
  2.  
  3.     <head>
  4.         <title>jQuery实现页面关键词高亮</title>
  5.         <style type="text/css">
  6.             * {
  7.                 margin: 0;
  8.                 padding: 0;
  9.             }
  10.  
  11.             p {
  12.                 padding: 10px;
  13.                 margin-bottom: 20px;
  14.             }
  15.  
  16.             .highlight {
  17.                 background-color: yellow;
  18.                 font-weight: bold;
  19.             }
  20.         </style>
  21.     </head>
  22.  
  23.     <body>
  24.         <form>
  25.             <p>
  26.                 I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
  27.             </p>
  28.             <p>
  29.                 I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
  30.             </p>
  31.             <p>
  32.                 I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
  33.             </p>
  34.             <input type="text" id="text" />
  35.             <input type="button" id="search" value="Search" />
  36.             <input type="button" id="clear" value="Clear" />
  37.         </form>
  38.         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  39.         <script type="text/javascript">
  40.             $(document).ready(function() {
  41.                 //点击search按钮时，执行highlight函数
  42.                 $('#search').click(highlight);
  43.                 //点击clear按钮时，执行clearSelection函数
  44.                 $('#clear').click(clearSelection);
  45.  
  46.                 function highlight() {
  47.                     //先清空一下上次高亮显示的内容
  48.                     clearSelection();
  49.                     //获取输入的关键词
  50.                     var searchText = $('#text').val();
  51.                     //创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了
  52.                     var regExp = new RegExp(searchText, 'g');
  53.                     //遍历段落
  54.                     $('p').each(function() {
  55.                         var html = $(this).html();
  56.                         //将找到的关键词替换，加上highlight属性
  57.                         var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');
  58.                         //更新段落内容
  59.                         $(this).html(newHtml);
  60.                     });
  61.                 }
  62.  
  63.                 function clearSelection() {
  64.                     $('p').each(function() {
  65.                         //找到所有highlight属性的元素
  66.                         $(this).find('.highlight').each(function() {
  67.                             //将highlight样式去掉
  68.                             $(this).replaceWith($(this).html());
  69.                         });
  70.                     });
  71.                 }
  72.             });
  73.         </script>
  74.     </body>
  75.  
  76. </html>

执行运行代码，效果为：

jQuery实现页面关键词高亮的更多相关文章

  1. 如何通过js使搜索关键词高亮

    给你推荐通过jquery来实现高亮关键词.jquery.textSearch-1.0.js代码: (function($){ $.fn.textSearch =function(str,options ...

  2. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  3. php-设置关键词高亮的字符串处理函数

    /** * 设置关键词高亮的字符串处理函数 * @param [string] $str [要高亮的字符串] * @param array $word_arr [关键词] */function set ...

  4. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  5. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  6. 关于jquery计算页面元素数量

    这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...

  7. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  8. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  9. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

随机推荐

  1. Oracle中NVARCHAR2与VARCHAR2的相互转换

    将NVARCHAR2转换为VARCHAR2: declare v_username   varchar2(12)   ; v_nm_login   nvarchar2(12); begin selec ...

  2. Mybatis最入门---代码自动生成（generatorConfig.xml配置）

    [一步是咫尺,一步即天涯] 经过前文的叙述,各位看官是不是已经被Mybatis的强大功能给折服了呢?本文我们将介绍一个能够极大提升我们开发效率的插件:即代码自动生成.这里的代码自动生成包括,与数据库一 ...

  3. C语言每日小练（四）——勇者斗恶龙

    勇者斗恶龙 你的王国里有一条n个头的恶龙,你希望雇佣一些骑士把它杀死(砍掉全部的头). 村里有m个骑士能够雇佣.一个能力值为x的骑士能够砍掉恶龙一个致敬不超过x的头,且须要支付x个金币. 怎样雇佣骑士 ...

  4. Delphi-Cross-Socket

    Delphi-Cross-Socket GITHUB:https://github.com/winddriver/Delphi-Cross-Socket # Delphi 跨平台 Socket 通讯库 ...

  5. 【spring cloud】spring cloud Sleuth 和Zipkin 进行分布式链路跟踪

    spring cloud 分布式微服务架构下,所有请求都去找网关,对外返回也是统一的结果,或者成功,或者失败. 但是如果失败,那分布式系统之间的服务调用可能非常复杂,那么要定位到发生错误的具体位置,就 ...

  6. 在Windows下编译Emacs

    在Windows下编译Emacs Windows下编译好的Emacs主要有两个版本,一个来自http://nqmacs.sourceforge.net/,另一个来自http://www.crasseu ...

  7. 解决sqlite删除数据或者表后，文件大小不变的问题

    原因分析: sqlite采用的是变长纪录存储,当你从Sqlite删除数据后,未使用的磁盘空间被添加到一个内在的"空闲列表"中用于存储你下次插入的数据,用于提高效率,磁盘空间并没有丢 ...

  8. 乘法器的Verilog HDL实现

    原文链接:http://www.cnblogs.com/shengansong/archive/2011/05/23/2054401.html 1. 串行乘法器  两个N位二进制数x.y的乘积用简单的 ...

  9. IOS tableview 横向滚动

    1. UITableView 设置 CGRect tableViewRect = CGRectMake(0.0, 0.0, 50.0, 320.0);self.tableView = [[UITabl ...

  10. 24.Semaphore

    Semaphore     在进程方面完成信号线的控制,可以控制某个资源下,可被同时访问的线程个数.对系统的访问量进行评估,信号量维护了一个许可集:在许可前会阻塞每一个 semaphore.acqui ...