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

<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. SVN服务端的版本对比及创建仓库时的注意事项

    SVN是一个开放源代码的版本控制系统,分为客户端和服务端.就windows系统而言,客户端通常使用 TortoiseSVN,下载地址:https://tortoisesvn.net/  ,而服务端通常 ...

  2. HDU 2089 不要62(数位DP&#183;记忆化搜索)

    题意  中文 最基础的数位DP  这题好像也能够直接暴力来做   令dp[i][j]表示以 j 开头的 i 位数有多少个满足条件 那么非常easy有状态转移方程 dp[i][j] = sum{ dp[ ...

  3. adb root : adbd cannot run as root in production builds

    在有些android手机上使用adb root希望获取root权限时出现如下提示信息:adbd cannot run as root in production builds.此时提升root权限的方 ...

  4. INTEL SSD SMART 性能 E8 E9 转

    如题今天研究了一下怎么看Intel SSD Toolbox里边显示的Smart信息.首先说,查看Intel SSD smart信息最好最方便的当然就是自家的工具箱,用其他工具查看不是不可以,但是很多数 ...

  5. erlang 中文社区 下载

    http://www.cnerlang.com/download/     erlang 下载 http://www.blogjava.net/killme2008/archive/2007/06/1 ...

  6. Introducing .NET Core

    At connect(), we announced that .NET Core will be entirely released as open source software. I also ...

  7. MVC使用Entity Framework Code First,用漂亮表格显示1对多关系

    部门和职员是1对多关系.用一个表格列出所有部门,并且在每行显示该部门下的所有职员名称.如下: 部门和职员的Model: using System.Collections.Generic; namesp ...

  8. TCP的三次握手与四次挥手（详解+动图）

    背景描述 通过上一篇中网络模型中的IP层的介绍,我们知道网络层,可以实现两个主机之间的通信.但是这并不具体,因为,真正进行通信的实体是在主机中的进程,是一个主机中的一个进程与另外一个主机中的一个进程在 ...

  9. 如何读取抓取的wifi包内容

    有密码的WIFI,WIFI的密码会生成一个临时会话密钥,这个临时会话密钥可以用来加密会话内容,也就是说.比如你在浏览网页,用有密码的WIFI,连接上以后,浏览的网页流量是加密了的,所以更安全.无密码的 ...

  10. OBjective-C:atomic和nonatomic的区别

    atomic和nonatomic的区别: atomic: 设置成员变量的@property属性时,默认为atomic,提供多线程安全.因为多线程的缘故,所有的对象在操作成员变量时都是同步的,因此,为了 ...