jqueryでハイライト表示されているもの-よくある問題-php.cn

jqueryでハイライト表示されているもの

百草

リリース： 2023-06-13 16:03:24

オリジナル

1706 人が閲覧しました

jQuery におけるハイライトとは、ページ上でキーワードを検索するときにハイライトすることを指します。実装方法は次のとおりです: 1. まずハイライトする行を取得し、検索コンテンツを取得し、次にコンテンツの行全体を走査し、最後にハイライトカラーを追加する; 2.ハイライトプラグイン「jQuery highlight」を利用する公式サイトからjsファイルをダウンロードした後、htmlファイルにjsファイルを導入し、スタイルを追加するには「$("h1").highlightを使用します」 ("highlight")" を使用して、検索テキストを強調表示します。

jqueryでハイライト表示されているもの

このチュートリアルのオペレーティングシステム: Windows 10 システム、jQuery 3.6.4 バージョン、Dell G3 コンピューター。

JQueryのハイライトとは、ページ内でキーワードを検索する際のハイライトのことを指します実装方法は、

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検索結果、searchContent は特定の検索テキストです。

注: jQuery を導入する必要があります

この方法は推奨されません。問題ないようですが、バグがあります:

When検索内容は var word = $(this).html(); を使用して検索する要素の HTML コードを取得する場合、「span タグ内の a を

<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 中国語 Web サイトの他の関連記事を参照してください。