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

<html>

    <head>

        <title>jQuery实现页面关键词高亮</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            p {

                padding: 10px;

                margin-bottom: 20px;

            }

            .highlight {

                background-color: yellow;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <form>

            <p>

                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.

            </p>

            <p>

                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.

            </p>

            <p>

                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.

            </p>

            <input type="text" id="text" />

            <input type="button" id="search" value="Search" />

            <input type="button" id="clear" value="Clear" />

        </form>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                //点击search按钮时，执行highlight函数

                $('#search').click(highlight);

                //点击clear按钮时，执行clearSelection函数

                $('#clear').click(clearSelection);

                function highlight() {

                    //先清空一下上次高亮显示的内容

                    clearSelection();

                    //获取输入的关键词

                    var searchText = $('#text').val();

                    //创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了

                    var regExp = new RegExp(searchText, 'g');

                    //遍历段落

                    $('p').each(function() {

                        var html = $(this).html();

                        //将找到的关键词替换，加上highlight属性

                        var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');

                        //更新段落内容

                        $(this).html(newHtml);

                    });

                }

                function clearSelection() {

                    $('p').each(function() {

                        //找到所有highlight属性的元素

                        $(this).find('.highlight').each(function() {

                            //将highlight样式去掉

                            $(this).replaceWith($(this).html());

                        });

                    });

                }

            });

        </script>

    </body>

</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. centos配置虚拟主机virtualhost,让服务器支持多网站多域名(转)

    如何让centos(redhat)配置虚拟主机,让服务器支持多个网站,针对Apache,只需要你修改apache配置文件/etc/httpd/conf/httpd.conf即可. 里面有个exampl ...

  2. Polly简介 — 2. 弹性策略

    和故障处理策略不同的是,弹性策略并不是针对委托执行过程中的异常进行处理,而是改变委托本身的行为,因此弹性策略并没有故障定义这一过程,它的处理流程为: 定义策略 应用策略 Polly对弹性策略也做了不少 ...

  3. C# string byte[] Base64 常用互相转换

    参考: http://www.cnblogs.com/zxx193/p/3605238.html?utm_source=tuicool http://www.cnblogs.com/freeliver ...

  4. 如何在IE11中开启WebGL暨微软和WebGL的恩怨情仇录

    正如我们上周报道的,国外开发者Francois Remy在泄露版Windows Blue附带的Internet Explorer 11中发现,WebGL接口已经封装完成,但功能上还未能开放支持.在这之 ...

  5. codeforces 558B Amr and The Large Array-yy

    题意:有一个数组.如今要削减它的尺寸.数组中同样元素的个数的最大值为数组的魅力值,要求削减后魅力值不能降低,同一时候要尽可能的把尺寸减到最小 分析:水题,主要是不要想复杂了.还有就是沉下心来做 代码: ...

  6. CMMI5级——原因分析及解决方案(Causal Analysis and Resolution)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010825142/article/details/15338085 聪明的人在出现问题的时候,除了 ...

  7. 单独配置secondarynamenode

    一.配置说明 这是在我之前yarn框架上通过加入节点,改动相关的配置文件,使得secondarynamenode独立出来的,所以这里前期的一系列琐碎配置请參考我之前的博客: http://blog.c ...

  8. Android网络通信Volley框架源代码浅析（二）

    尊重原创 http://write.blog.csdn.net/postedit/25921795 在前面的一片文章Volley框架浅析(一)中我们知道在RequestQueue这个类中,有两个队列: ...

  9. iOS动画相关(持续更新)

    1.When my application is entering background, because the user push the home button, the animations ...

  10. key-value 多线程server的Linux C++实现

    项目需求 整体思路 网络通信 字符解析 数据存储与查询 1 存储管理 2 数据查询 多线程 待改进未实现的想法 GitHub源代码 项目需求 设计一个基于Socket或基于HTTP的server,服务 ...