Qu'est-ce qui est mis en évidence dans jquery
- 百草original
- 2023-06-13 10:12:511652parcourir
La mise en surbrillance dans jQuery fait référence à la mise en évidence lors de la recherche de mots-clés sur la page. La méthode d'implémentation est la suivante : 1. Obtenez d'abord la ligne à mettre en surbrillance, obtenez le contenu de la recherche, puis parcourez toute la ligne de contenu. , et enfin ajoutez la couleur de surbrillance ; 2. Utilisez le plug-in de surbrillance "jQuery highlight". Après avoir téléchargé le fichier js depuis le site officiel, introduisez le fichier js dans le fichier html et ajoutez le style, utilisez "$("h1. ").highlight("highlight" )" pour mettre en surbrillance le texte recherché.
Le système d'exploitation pour ce tutoriel : système Windows 10, jQuery version 3.6.4, ordinateur Dell G3.
La mise en évidence de jQuery fait référence à la mise en évidence lors de la recherche de mots-clés sur la page. La méthode pour y parvenir est la suivante :
Méthode 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 correspond à tous les résultats de recherche et searchContent est votre texte de recherche spécifique.
Remarque : Besoin d'introduire jQuery
Cette méthode n'est pas recommandée Cela semble aller, mais il y a un bug : #🎜. 🎜## 🎜🎜#Lorsque le contenu de la recherche est a, utilisez var word = $(this).html(); pour obtenir le code html de l'élément à trouver, et "Remplacez a dans la balise span par 733e9508795ef10651bd20f343e7b02f>...45a2772a6b6107b401db3c9b82c049c2"
Ce dont nous avons besoin, c'est de remplacer uniquement le contenu du texte, pas le code HTML, regardons donc la deuxième méthode.
Méthode 2
Cette méthode consiste à utiliser le plugin jquery highlight.
Allez sur le site officiel pour télécharger le fichier js : jQuery Highlight Plugin | bartaz @ GitHub
Faites défiler jusqu'à l'emplacement Où l'obtenir ? en bas pour télécharger.
Ce que j'utilise maintenant est : http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js
Ce fichier js fait référence à votre fichier html, puis ajoute le style :
<style>
.highlight {background-color: #FFFF88; }
</style>Ensuite, vous n'avez besoin que de js comme celui-ci : $("h1").highlight("highlight"); Le texte recherché peut désormais être mis en surbrillance.
Ce qui suit est un exemple complet :
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!