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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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脚本数据库功能详解(中)
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
分页栏的web标准实现
2011/11/01 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
代码详解django中数据库设置
2019/01/28 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
分享一个python的aes加密代码
2020/12/22 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
单位委托书怎么写
2014/08/02 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android