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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 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 方便水印和缩略图的图形类
2009/05/21 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Django中login_required装饰器的深入介绍
2017/11/24 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python内置数据类型之列表操作
2018/11/12 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
RealTek面试题
2016/06/28 面试题
计算s=f(f(-1.4))的值
2014/05/06 面试题
介绍一下Make? 为什么使用make
2013/12/08 面试题
现场活动策划方案
2014/08/22 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Python实现为PDF去除水印的示例代码
2022/04/03 Python