jQuery实现搜索页面关键字的功能
更新时间:2017年02月16日 08:39:09 作者:yuan10277
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery progressbar通过Ajax请求实现后台进度实时功能
这篇文章主要介绍了jQuery progressbar通过Ajax请求实现后台进度实时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-10-10jquery中的mouseleave和mouseout的区别 模仿下拉框效果
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件2012-02-02基于jQuery的Spin Button自定义文本框数值自增或自减
这个jquery 插件可以让你的文本框增加一个自增或自减的小按钮,方便输入数值的控制。2010-07-07jquery的clone方法应用于textarea和select的bug修复
textarea和select的值clone的时候会丢掉,在clone的时候将val再重新赋值一下,如果知道这个了就加单了2014-06-06Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
这篇文章主要介绍了Spring shiro + bootstrap + jquery.validate 实现登录、注册功能,需要的朋友可以参考下2017-06-06
最新评论