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滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
浅谈Python的异常处理
2016/06/19 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python3 求约数的实例
2019/12/05 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
行政总监岗位职责
2013/12/05 职场文书
军训考核自我鉴定
2014/02/13 职场文书
微信营销策划方案
2014/02/24 职场文书
竞聘演讲稿
2014/04/24 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
支行行长岗位职责
2015/02/15 职场文书
初二数学教学反思
2016/02/17 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript