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

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

具体代码：

html标题TItle SEarch/TItle style type=' text/CSS ' p { border :1 px纯黑；宽度宽度：500pxpadding:5px}。突出显示{背景色：黄色；}/样式/头部身体形态p我考虑一个男人的大脑原本就像一个空空的小阁楼，你得为它备足你选择的家具。一个傻瓜会把他遇到的各种各样的木材都收集起来，这样可能对他有用的知识就会被挤出去，或者充其量和许多其他东西混在一起，这样他就很难找到它们p/p我认为人的大脑原本就像一个空空的小阁楼，你必须为它储备你选择的家具。一个傻瓜会把他遇到的各种各样的木材都收集起来，这样可能对他有用的知识就会被挤出去，或者充其量和许多其他东西混在一起，这样他就很难找到它们p/p我认为人的大脑原本就像一个空空的小阁楼，你必须为它储备你选择的家具。一个傻瓜会把他遇到的各种各样的木材都收集起来，这样可能对他有用的知识就会被挤出去，或者充其量和许多其他东西混在一起，这样他就很难找到它们/p .输入类型='text' id='text'/输入类型='button' id='search '值='搜索'/输入类型='button' id='clear '值='清除'/表单脚本类型=' text/JavaScript ' src=' http :/jquery。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function () { $('#search ')).点击（高亮显示);//点击搜索时，执行高光函数；$('#clear ').点击(clear selection)；//点击清楚的按钮时，执行clearSelection函数；函数highlight(){ clearSelection()；//先清空一下上次高亮显示的内容；var searchText=$('#text ').val()；//获取你输入的关键字；var regExp=new RegExp(searchText，' g ')；//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；$('p ').每个（函数()//遍历文章；{ var html=$(this).html()；var newHtml=html.replace(regExp，' span class=' highlight ' '搜索文本'/span ')；//将找到的关键字替换，加上高光属性；$(这个)。html(NewHTML)；//更新文章；});}函数clearSelection() { $('p ').每个（函数()//遍历{ $(这个)。查找('。突出显示')。每个（函数()//找到所有高光属性的元素；{ $(这个)。替换为($(这个).html())；//将他们的属性去掉；});});} });/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。