jquery中什么是高亮显示-常见问题-PHP中文网

jQuery中高亮显示是指对页面搜索关键词时进行高亮显示，其实现办法：1、先获取要高亮显示的行，获取搜索的内容，再遍历整行内容，最后添加高亮颜色；2、使用“jQuery highlight”高亮插件，官网下载js文件后，在html文件中引入js文件并加上样式，使用“$("h1").highlight("highlight")”即可高亮搜索文本。

jquery中什么是高亮显示

本教程操作系统：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, '' + searchContent + ''); $(this).html(word); }); });

登录后复制

rowNode是全部搜索结果，而searchContent是你具体的搜索文本。

注意：需要引入jQuery

不推荐这种方式，看起来没什么问题，但是有个Bug：

当搜索内容为a的时候，使用var word = $(this).html();获取待查找元素的html代码后，会出现“把span标签中的a替换成>...”这样的问题。

我们需要的是仅仅替换文本内容，而不是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文件，然后加上样式：

登录后复制

接着只需要js像这样：$("h1").highlight("highlight"); 就可以高亮搜索文本了。

下面是一个完整实例：

   regex.html        
     
  This is a test head!  input the search key. 
  click "搜索" button. 
 
 如下是搜索区域!
  This is a test body!  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! 
  这是一个简答的测试,测试. 你知道或者听过这个测试吗，我认为你没有听过这个测试！
 
  This is a test, a test, test, tes, te, t! I know't know this test, yes, this test is a not famous test! Follow me test, to test the test! I don't know what do you say?
 
   这是一个简答的测试,测试. 我不知道这个测试，是的，这不是一个注明的测试， 跟随我，去测试这个测试，我都不知道我在说什么！ 
 
  What do you say? test, only a test? 你们说什么呢？测试，一个测试？