jqueryでハイライト表示されているもの
- 百草オリジナル
- 2023-06-13 10:12:511642ブラウズ
jQuery におけるハイライトとは、ページ上でキーワードを検索するときにハイライトすることを指します。実装方法は次のとおりです: 1. まずハイライトする行を取得し、検索コンテンツを取得し、次にコンテンツの行全体を走査し、最後にハイライトカラーを追加する; 2.ハイライトプラグイン「jQuery highlight」を利用する 公式サイトからjsファイルをダウンロードした後、htmlファイルにjsファイルを導入し、スタイルを追加するには「$("h1").highlightを使用します」 ("highlight")" を使用して、検索テキストを強調表示します。
このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery 3.6.4 バージョン、Dell G3 コンピューター。
JQueryのハイライトとは、ページ内でキーワードを検索する際のハイライトのことを指します 実装方法は、
Method 1
$(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 is all検索結果、searchContent は特定の検索テキストです。
注: jQuery を導入する必要があります
この方法は推奨されません。問題ないようですが、バグがあります:
When検索内容は var word = $(this).html(); を使用して検索する要素の HTML コードを取得する場合、「span タグ内の a を 1f8114a093d82a1318b9b46912c94980 が表示されます。>...45a2772a6b6107b401db3c9b82c049c2」そんな質問。
必要なのは、HTML コードではなく、テキスト コンテンツのみを置き換えることです。そのため、方法 2 を見てみましょう。
方法 2
この方法は、jquery ハイライト プラグインを使用する方法です。
公式 Web サイトに移動して js ファイルをダウンロードします: jQuery Highlight Plugin | bartaz @ GitHub
下部にある「入手先」の場所まで下にスクロールしてダウンロードします。
私が現在使用しているものは次のとおりです: 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 中国語 Web サイトの他の関連記事を参照してください。