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


Posted in Javascript onFebruary 16, 2017

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
Javascript中的arguments对象
Jun 20 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
js模拟实现烟花特效
Mar 10 Javascript
ReactRouter的实现方法
Jan 25 Javascript
canvas时钟效果
Feb 16 #Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
header导出Excel应用示例
2014/01/24 PHP
php实现的RSS生成类实例
2015/04/23 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现绘制树枝简单示例
2014/07/24 Python
python中__call__方法示例分析
2014/10/11 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python中while和for的区别总结
2019/06/28 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python中实现栈的三种方法
2020/12/19 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
外贸销售员求职的自我评价
2013/11/23 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
初中体育课教学反思
2016/02/16 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书