What is highlighting in jquery-Common Problem-php.cn

What is highlighting in jquery

百草

Release： 2023-06-13 16:03:24

Original

1676 people have browsed it

Highlighting in jQuery refers to highlighting when searching for keywords on the page. The implementation method is: 1. First get the row to be highlighted, get the search content, then traverse the entire row of content, and finally Add highlight color; 2. Use the "jQuery highlight" highlight plug-in. After downloading the js file from the official website, introduce the js file into the html file and add the style, use "$("h1").highlight("highlight")" to highlight the search text.

What is highlighting in jquery

The operating system of this tutorial: Windows 10 system, jQuery 3.6.4 version, Dell G3 computer.

JQuery’s highlighting refers to highlighting when searching for keywords on the page. The method of implementing it is:

Method 1

$(function () {
    //1.获取要高亮显示的行
    var rowNode = $(&#39;.tiBlock_3NhqL&#39;);
    //2.获取搜索的内容
    var searchContent = $(".searchInput_29REY").val();
    //3.遍历整行内容，添加高亮颜色
    rowNode.each(function () {
        var word = $(this).html();
        word = word.replace(searchContent, &#39;<span style="color: #c00;">&#39; + searchContent + &#39;</span>&#39;);
        $(this).html(word);
    });
});

Copy after login

rowNode is all search results, and searchContent is your specific search text.

Note: jQuery needs to be introduced

This method is not recommended. It seems to be fine, but there is a bug:

When the search content is a When using var word = $(this).html(); to obtain the HTML code of the element to be found, "Replace a in the span tag with will appear. >..." such a question.

What we need is to replace only the text content, not the html code, so let’s look at method two.

Method 2

This method is to use the jquery highlight plug-in.

Go to the official website to download the js file: jQuery Highlight Plugin | bartaz @ GitHub

Scroll down to the Where to get it? location at the bottom to download.

What I am using now is: http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js

Reference this js file to Your html file, and then add the style:

<style>
.highlight {background-color: #FFFF88; }
</style>

Copy after login

Then you only need js like this: $("h1").highlight("highlight"); to highlight the search text.

The following is a complete example:

<!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(){
  $(&#39;#search&#39;).click(function(){
  var key = $(&#39;#key&#39;).val();
    if(key != undefined  && key.length > 0) { //注意要判断key是否为undefined
    var body = $(&#39;#body&#39;);
    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&#39;t know this test!
    </div>
    <div>
    这是一个简答的测试,测试.
    <p>你知道或者听过这个测试吗，我认为你没有听过这个测试！</p>
    </div>
    <div>
    This is a test, a test, test, tes, te, t!
    I know&#39;t know this test, yes, this test is a not famous test!
    <p>Follow me test, to test the test! I don&#39;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>

Copy after login

The above is the detailed content of What is highlighting in jquery. For more information, please follow other related articles on the PHP Chinese website!