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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
js canvas实现擦除动画
Jul 16 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JS如何生成随机验证码
Mar 02 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php中的静态变量的基本用法
2014/03/20 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
ES6的解构赋值实例详解
2019/05/06 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python映射拆分操作符用法实例
2015/05/19 Python
在Django中创建第一个静态视图
2015/07/15 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python中有几个关键字
2020/06/04 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
《鲁班学艺》读后感3篇
2019/11/27 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
python3读取文件指定行的三种方法
2021/05/24 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL