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

<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. apache如何支持asp.net

    Apache是目前广泛使用的一种网络服务器程序,不仅在UNIX/LINUX平台上被大量使用,而且在Windows平台上也有许多站点放弃了IIS而转向Apache..NET是微软推出的功能强大的开发技术 ...

  2. /dev/rdsk 与 /dev/dsk区别

    /dev/rdsk/c0t0d0s0 裸设备 /dev/dsk/c0t0d0s0 块设备 它们链接的是同一块物理设备,具体区别是在访问方式上. 裸设备是假设硬盘上没有文件系统时的访问方式. 裸设备是按 ...

  3. iOS开发里的Bundle是个啥玩意？！

    初学iOS开发的同学,不管是自己写的,还是粘贴的代码,或多或少都写过下面的代码 [[NSBundle mainBundle] pathForResource:@"someFileName&q ...

  4. HDU2838 Cow Sorting 树状数组 区间求和加逆序数的应用

    这题目意思非常easy,就是给你一个数组,然后让你又一次排好序,排序有要求的,每次仅仅能交换两个元素的位置,交换须要一个代价 就是两个元素之和,问你把数组重小到大排好最少须要多少代价 可能一開始想不到 ...

  5. [翻译] AsyncImageView 异步下载图片

    AsyncImageView  https://github.com/nicklockwood/AsyncImageView AsyncImageView is a simple extension ...

  6. Objective—C中的排序及Compare陷阱

    campare陷阱 NSString有多个compare相关方法: - (NSComparisonResult)compare:(NSString *)string; - (NSComparisonR ...

  7. strncpy实现

    #include<stdio.h> char *my_strncpy(char *dest,char *src,int n) { int i; ;i<n && src ...

  8. cout的输出格式初探

    在C++中,cout代表的是标准输出设备,即显示器,相对于C语言中所使用的printf函数,cout显得更为灵活.下面以30.300和1024三个数为例子,简单说明cout输出时所选格式的输出.cou ...

  9. python2 和 python3兼容写法

    一:使用ImportError,Python3中将一些Python2的模块名称做了修改,需要我们做一些处理来保证代码在不同Python版本中能够正常运行 # -*- coding: utf- -*- ...

  10. 【SPOJ】【1825】Free Tour 2

    点分治 点分治的例题2(本题代码结果为TLE……) 强烈谴责卡时限QAQ,T了无数次啊无数次…… 不过在N次的静态查错中倒是加深了对点分治的理解……也算因祸得福吧(自我安慰一下) TLE后的改进:每棵 ...