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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
js实现拖拽功能
Mar 01 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 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
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
一看就懂得Python的math模块
2018/10/21 Python
python中if及if-else如何使用
2020/06/02 Python
pandas DataFrame运算的实现
2020/06/14 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
医大实习自我鉴定
2013/12/07 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
活动总结新闻稿
2014/08/30 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
社区服务活动感想
2015/08/11 职场文书
安全生产协议书
2016/03/22 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Nginx进程管理和重载原理详解
2021/04/22 Servers