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

jquery中什么是高亮显示

betcha

发布： 2023-06-13 10:12:51

原创

1944人浏览过

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, '<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中什么是高亮显示的详细内容，更多请关注php中文网其它相关文章！