首页 > 常见问题 > 正文

jquery中什么是高亮显示

百草
发布: 2023-06-13 16:03:24
原创
1424 人浏览过

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 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?

你们说什么呢?测试,一个测试?

登录后复制

以上是jquery中什么是高亮显示的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!