MyException - 我的异常网
当前位置:我的异常网» jQuery » jQuery实现页面基本词高亮

jQuery实现页面基本词高亮

www.MyException.Cn  网友分享于:2013-09-03  浏览:0次
jQuery实现页面关键词高亮

示例代码,关键位置做了注释,请查看代码:

<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>

执行运行代码,效果为:

 

文章评论

Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
如何成为一名黑客
如何成为一名黑客
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
一个程序员的时间管理
一个程序员的时间管理
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
 程序员的样子
程序员的样子
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
那些争议最大的编程观点
那些争议最大的编程观点
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我是如何打败拖延症的
我是如何打败拖延症的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员的鄙视链
程序员的鄙视链
程序员必看的十大电影
程序员必看的十大电影
程序员都该阅读的书
程序员都该阅读的书
中美印日四国程序员比较
中美印日四国程序员比较
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为什么程序员都是夜猫子
为什么程序员都是夜猫子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员和编码员之间的区别
程序员和编码员之间的区别
旅行,写作,编程
旅行,写作,编程
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
编程语言是女人
编程语言是女人
代码女神横空出世
代码女神横空出世
我的丈夫是个程序员
我的丈夫是个程序员
每天工作4小时的程序员
每天工作4小时的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有