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 相关文章推荐
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python异常学习笔记
2015/02/03 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
详解python中*号的用法
2019/10/21 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
中式面点餐厅创业计划书
2014/01/29 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
营销总监岗位职责
2014/09/16 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
入党心得体会
2019/06/20 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python