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

<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. 关于maven依赖中的<scope>provided</scope>使用

    今天开发web的时候,需要用到servlet-api,于是在pom.xml中添加依赖 <dependency> <groupId>javax.servlet</group ...

  2. maven里如何根据不同的environment打包

    一个项目里总会有很多配置文件.而且一般都会有多套环境.开发的.测试的.正式的.而在这些不同的环境这些配置的值都会不一样.比如mail的配置.服务的url配置这些都是很常见的.所以在打包的时候就要根据e ...

  3. 怎样在MyEclipse上耍Chrome

    近期在忙着期末大作业,所以Windows App和算法的专栏都没有更了,随后这几天都会陆续開始更新的,欢迎大家的关注啦-- 在写期末大作业的时候遇到一个问题.一个新的特性在MyEclipse自带的浏览 ...

  4. CSerialPort串口类最新修正版(解决关闭死锁问题)

    这是一份优秀的类文件,好多的地方值得我们学习,具体在多线程,事件,自定义消息,类的封装方面等等.Remon提供的串口类网址为:http://codeguru.earthweb.com/network/ ...

  5. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

  6. 如何使用C#关键字const,readonly,static

    如果有一个值不太会变化,我们经常使用const和readonly,这2者有何不同呢?有时候,我们也会在readonly之前加上关键字static,这又意味着什么呢? const ● const默认是静 ...

  7. Android调用手机中的应用市场，去评分的功能实现

    在我们常常使用的软件当中,我们经常可以看到在软件的设置界面,有一个功能那就是去评分的功能,只要我们一点击“去评分”就会调用手机中的应用市场软件.一开始我以为这个功能的实现是要遍历整个手机中的软件包名, ...

  8. wrap ConcurrentDictionary in BlockingCollection

    ConcurrentDictionary<int, BlockingCollection<string>> mailBoxes = new ConcurrentDictiona ...

  9. java int类型转换成String ， 不足10位 在前面补0

    String.format("%010d", 25); 0代表前面要补的字符 10代表字符串长度 d表示参数为整数类型 String s = "Hello World!& ...

  10. 基于zabbix的Redis、Sentinel、Slave多实例自动发现监控

    约定 保证whereis redis-cli 能够正确返回redis-cli程序的路径 保证 redis的配置文件在模板宏{$REDIS_SERVER_CONFIG_PATH}的路径,并且后缀名 为. ...