<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <style> .pink{ color:pink; } </style> </head> <body> <div> <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p> <hr /> <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p> <input type="text" id="find"/> <button οnclick="search()">查找</button> </div> <script> function search() { var searchText = $('#find').val(); //获取输入框的值 var regExp = new RegExp(searchText, 'g'); //正则表达式,将输入框中的值放入 $("p").each(function () { var text = $(this).text(); //获取p的文本值 var newHtml = text.replace(regExp, '<span class="pink">' + searchText + '</span>'); //如果正则表达式的值,在p中存在,则用后面的参数替代原有的值 $(this).html(newHtml);//更新一下 }); } </script> </body> </html>
jquery 输入框查找关键字并提亮颜色
最新推荐文章于 2021-11-10 09:39:50 发布