快捷導(dǎo)航

jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能

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

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

在一篇文章中查找關(guā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);//點(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è)就不會(huì)繼續(xù)向下查找了； 
      $('p').each(function()//遍歷文章； 
      { 
        var html = $(this).html(); 
        var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');//將找到的關(guān)鍵字替換，加上highlight屬性； 
  
        $(this).html(newHtml);//更新文章； 
      }); 
    } 
    function clearSelection() 
    { 
      $('p').each(function()//遍歷 
      { 
        $(this).find('.highlight').each(function()//找到所有highlight屬性的元素； 
        { 
          $(this).replaceWith($(this).html());//將他們的屬性去掉； 
        }); 
      }); 
    } 
  }); 
   </script> 
  </body> 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: