使用jQuery怎么实现一个页面关键字搜索功能

这篇文章给大家介绍使用jQuery怎么实现一个页面关键字搜索功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司从2013年创立，公司以成都网站建设、成都做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户成百上千家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

具体代码：

 
   
     
     
      p { border:1px solid black;width:500px;padding:5px;} 
      .highlight { background-color:yellow; } 
     
   
   
    
 
      
 
        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. 
      
 
      
 
        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. 
      
 
      
 
        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. 
      
 
       
       
       
     
 
 
  $(document).ready(function () 
  { 
    $('#search').click(highlight);//点击search时，执行highlight函数； 
    $('#clear').click(clearSelection);//点击clear按钮时，执行clearSelection函数； 
  
    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, ''+searchText+'');//将找到的关键字替换，加上highlight属性； 
  
        $(this).html(newHtml);//更新文章； 
      }); 
    } 
    function clearSelection() 
    { 
      $('p').each(function()//遍历 
      { 
        $(this).find('.highlight').each(function()//找到所有highlight属性的元素； 
        { 
          $(this).replaceWith($(this).html());//将他们的属性去掉； 
        }); 
      }); 
    } 
  }); 
    
   

关于使用jQuery怎么实现一个页面关键字搜索功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前文章：使用jQuery怎么实现一个页面关键字搜索功能
文章出自：http://cdxtjz.cn/article/iedjdh.html