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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JavaScript指定断点操作实例教程
Sep 18 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
YII框架关联查询操作示例
2019/04/29 PHP
php实现文件上传基本验证
2020/03/04 PHP
javascript中字符串的定义示例代码
2013/12/19 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python实现外卖信息管理系统
2018/01/11 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python是什么 Python的用处
2020/05/26 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
安全生产检讨书
2014/01/21 职场文书
法定代表人身份证明书
2014/09/10 职场文书
财务工作失职检讨书
2014/11/21 职场文书
新郎答谢词
2015/01/04 职场文书