Home > Article > What is highlighting in jquery

What is highlighting in jquery

百草Original: 2023-06-13 10:12:511642browse

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.

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);
    });
});

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 b76781af6de7e0352d0f8e80d2f2bbc8 will appear. >...45a2772a6b6107b401db3c9b82c049c2" 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>

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>

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!

jquery html var JS this github http bug word

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to replace placeholders in go languageNext article：How to replace placeholders in go language

See more

What is highlighting in jquery

Related articles