這篇文章給大家介紹使用jQuery怎么實(shí)現(xiàn)一個(gè)頁面關(guān)鍵字搜索功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，公司以成都網(wǎng)站建設(shè)、成都做網(wǎng)站、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶成百上千家，涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

具體代碼：

 
   
     
     
      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);//點(diǎn)擊search時(shí)，執(zhí)行highlight函數(shù)； 
    $('#clear').click(clearSelection);//點(diǎn)擊clear按鈕時(shí)，執(zhí)行clearSelection函數(shù)； 
  
    function highlight() 
    { 
      clearSelection();//先清空一下上次高亮顯示的內(nèi)容； 
      var searchText = $('#text').val();//獲取你輸入的關(guān)鍵字； 
      var regExp = new RegExp(searchText, 'g');//創(chuàng)建正則表達(dá)式，g表示全局的，如果不用g，則查找到第一個(gè)就不會繼續(xù)向下查找了； 
      $('p').each(function()//遍歷文章； 
      { 
        var html = $(this).html(); 
        var newHtml = html.replace(regExp, ''+searchText+'');//將找到的關(guān)鍵字替換，加上highlight屬性； 
  
        $(this).html(newHtml);//更新文章； 
      }); 
    } 
    function clearSelection() 
    { 
      $('p').each(function()//遍歷 
      { 
        $(this).find('.highlight').each(function()//找到所有highlight屬性的元素； 
        { 
          $(this).replaceWith($(this).html());//將他們的屬性去掉； 
        }); 
      }); 
    } 
  }); 
    
   

關(guān)于使用jQuery怎么實(shí)現(xiàn)一個(gè)頁面關(guān)鍵字搜索功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。