jQuery实现搜索页面关键字的功能_网络技术_宿州市腾雀网络科技有限公司

jQuery实现搜索页面关键字的功能

发布时间 - 2026-01-10 23:05:09 点击率：次

在一篇文章中查找关键字，找到后高亮显示。

具体代码：

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery搜索页面关键字 # jQuery搜索关键字 # jQuery页面关键字 # JQuery+JS实现仿百度搜索结果中关键字变色效果 # jquery+json实现的搜索加分页效果 # 基于jquery的页面划词搜索JS # jquery中用jsonp实现搜索框功能 # jQuery Jsonp跨域模拟搜索引擎 # jquery 表格排序、实时搜索表格内容(附图) # jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页） # jQuery UI仿淘宝搜索下拉列表功能 # jQuery下拉美化搜索表单效果代码分享 # 基于jQuery实现页面搜索功能 # JavaScript前端页面搜索功能案例【基于jQuery】 # 遍历 # 他们的 # 找了 # 在一 # 到第 # 大家多多 # 清空 # 正则表达式 # padding # highlight # color # background # solid # px # width # black # originally # brain # attic # empty

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：顺丰快递官方查询通道顺丰包裹派送状态追踪

下一篇：实例讲解如何在ThinkPHP框架中使用模型

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：顺丰快递官方查询通道顺丰包裹派送状态追踪

下一篇：实例讲解如何在ThinkPHP框架中使用模型