jQuery實現(xiàn)搜索頁面關鍵字的功能

更新時間：2017年02月16日 08:39:09 作者：yuan10277

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)搜索頁面關鍵字的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在一篇文章中查找關鍵字，找到后高亮顯示。

具體代碼：

<html> 
  <head> 
    <title>Search</title> 
    <style type="text/css"> 
      p { border:1px solid black;width:500px;padding:5px;} 
      .highlight { background-color:yellow; } 
    </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 type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
  $(document).ready(function () 
  { 
    $('#search').click(highlight);//點擊search時，執(zhí)行highlight函數(shù)； 
    $('#clear').click(clearSelection);//點擊clear按鈕時，執(zhí)行clearSelection函數(shù)； 
  
    function highlight() 
    { 
      clearSelection();//先清空一下上次高亮顯示的內(nèi)容； 
      var searchText = $('#text').val();//獲取你輸入的關鍵字； 
      var regExp = new RegExp(searchText, 'g');//創(chuàng)建正則表達式，g表示全局的，如果不用g，則查找到第一個就不會繼續(xù)向下查找了； 
      $('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> 
  </body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: