jquery中高亮显示是指对页面搜索关键词时进行高亮显示，其实现办法：1、先获取要高亮显示的行，获取搜索的内容，再遍历整行内容，最后添加高亮颜色；2、使用“jquery highlight”高亮插件，官网下载js文件后，在html文件中引入js文件并加上样式，使用“$(h1).highlight(highlight)”即可高亮搜索文本。
本教程操作系统：windows10系统、jquery 3.6.4版本、dell g3电脑。
jquery的高亮显示，是指对页面搜索关键词时进行高亮显示，其实现的办法：
方法一
$(function () { //1.获取要高亮显示的行 var rownode = $('.tiblock_3nhql'); //2.获取搜索的内容 var searchcontent = $(".searchinput_29rey").val(); //3.遍历整行内容，添加高亮颜色 rownode.each(function () { var word = $(this).html(); word = word.replace(searchcontent, '<span style="color: #c00;">' + searchcontent + '</span>'); $(this).html(word); });});
rownode是全部搜索结果，而searchcontent是你具体的搜索文本。
注意： 需要引入jquery
不推荐这种方式，看起来没什么问题，但是有个bug：
当搜索内容为a的时候，使用var word = $(this).html();获取待查找元素的html代码后，会出现“把span标签中的a替换成<span style="color: #c00;">>...<span>”这样的问题。
我们需要的是仅仅替换文本内容，而不是html代码，所以来看方法二吧。
方法二
这种方法就是使用jquery highlight高亮插件。
去官网下载js文件： jquery highlight plugin | bartaz @ github
下拉到底部的where to get it?位置下载。
我现在用的是： http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js
把这个js文件引用到你的html文件，然后加上样式：
<style>.highlight {background-color: #ffff88; }</style>
接着只需要js像这样：$("h1").highlight("highlight"); 就可以高亮搜索文本了。
下面是一个完整实例：
<!doctype html><html> <head> <title>regex.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script> <script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script> <style> .highlight {background-color: #ffff88; } </style> <script> $(function(){ $('#search').click(function(){ var key = $('#key').val(); if(key != undefined && key.length > 0) { //注意要判断key是否为undefined var body = $('#body'); body.removehighlight(); body.highlight(key); } else { alert("请输入关键字！") } }); }); </script> </head> <body> <div> <input id="key" type="text"> <input id="search" type="button" value="搜索"> </div> <div id="head"> this is a test head! <div> input the search key. </div> <div> click "搜索" button. </div> </div> <h1>如下是搜索区域!</h1> <div id="body"> this is a test body! <div> this is a test, a test, test, tes, te, t! do you know and listen this test, i think you don't know this test! </div> <div> 这是一个简答的测试,测试. <p>你知道或者听过这个测试吗，我认为你没有听过这个测试！</p> </div> <div> this is a test, a test, test, tes, te, t! i know't know this test, yes, this test is a not famous test! <p>follow me test, to test the test! i don't know what do you say?</p> </div> <div> <div> 这是一个简答的测试,测试. 我不知道这个测试，是的，这不是一个注明的测试， <span>跟随我，去测试这个测试，我都不知道我在说什么！</span> </div> </div> <div> what do you say? test, only a test? <p>你们说什么呢？测试，一个测试？</p> </div> </div> </body></html>
以上就是jquery中什么是高亮显示的详细内容。