码迷,mamicode.com
首页 > Web开发 > 详细

Jquery实现页面关键字搜索

时间:2014-05-21 22:36:35      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

bubuko.com,布布扣

 <style type="text/css">
   .highlight { background-color:yellow; }
 </style>

 <script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function ()
    {
        $(‘#search‘).click(highlight);//点击search时,执行highlight函数;

        function highlight()
        {
clearSelection();
//先清空一下上次高亮显示的内容; var searchText = $(‘#text‘).val();//获取你输入的关键字; var regExp = new RegExp(searchText, ‘g‘);//创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了; $(‘p‘).each(function()//遍历文章; { var html = $(this).html(); var newHtml = html.replace(regExp, ‘<span class="highlight">‘+searchText+‘</span>‘);//将找到的关键字替换,加上highlight属性; $(this).html(newHtml);//更新文章; }); } function clearSelection() { $(‘p‘).each(function()//遍历 { $(this).find(‘.highlight‘).each(function()//找到所有highlight属性的元素; { $(this).replaceWith($(this).html());//将他们的属性去掉; }); }); } }); </script>
bubuko.com,布布扣

 

Jquery实现页面关键字搜索,布布扣,bubuko.com

Jquery实现页面关键字搜索

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/yyx3254/p/3739162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!