jQuery实现搜索页面关键字的功能

在一篇文章中查找关键字，找到后高亮显示。

具体代码：

<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时，执行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, '<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery搜索页面关键字 # jQuery搜索关键字 # jQuery页面关键字 # JQuery+JS实现仿百度搜索结果中关键字变色效果 # jquery+json实现的搜索加分页效果 # 基于jquery的页面划词搜索JS # jquery中用jsonp实现搜索框功能 # jQuery Jsonp跨域模拟搜索引擎 # jquery 表格排序、实时搜索表格内容(附图) # jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页） # jQuery UI仿淘宝搜索下拉列表功能 # jQuery下拉美化搜索表单效果代码分享 # 基于jQuery实现页面搜索功能 # JavaScript前端页面搜索功能案例【基于jQuery】 # 遍历 # 他们的 # 找了 # 在一 # 到第 # 大家多多 # 清空 # 正则表达式 # padding # highlight # color # background # solid # px # width # black # originally # brain # attic # empty

返回目录在线咨询

上一篇：数据备份策略：租用服务器空间时的数据备份服务是如何运作的？
下一篇：晋城网站制作优化师招聘,安全教育平台122怎么登录？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery实现搜索页面关键字的功能

您的项目需求