Comment implémenter la mise en évidence de texte dans jQuery ?

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier la manipulation et la gestion des événements des documents HTML. Lors de l'implémentation de la fonction de surbrillance de texte, vous pouvez utiliser jQuery en suivant les étapes suivantes :

1. Introduire le fichier de bibliothèque jQuery :
   Tout d'abord, vous devez introduire le fichier de bibliothèque jQuery dans le fichier HTML, qui peut être ajouté via un lien CDN ou une page locale. Ajoutez l'extrait de code suivant dans la balise  :

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. Écriture de la structure HTML :
   Ajoutez une zone de texte ou d'autres éléments HTML à la page pour saisir le contenu du texte qui doit être mis en surbrillance. L'exemple de code est le suivant :

<input type="text" id="searchInput" placeholder="输入需要高亮显示的文本">
<button id="highlightBtn">高亮显示</button>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula metus ac odio.
</div>

3. Écrivez du code jQuery :
   Ensuite, écrivez du code via jQuery pour implémenter la fonction de surbrillance de texte. L'exemple de code est le suivant :

$(document).ready(function() {
    $("#highlightBtn").click(function() {
        var searchString = $("#searchInput").val();
        var content = $("#content").text();
        
        var highlightedContent = content.replace(new RegExp(searchString, 'gi'), function(match) {
            return '<span class="highlighted">' + match + '</span>';
        });
        
        $("#content").html(highlightedContent);
    });
});

Dans le code ci-dessus, récupérez d'abord le texte recherché dans la zone de saisie et le texte dans la zone de contenu. Utilisez ensuite la méthode de remplacement de JavaScript combinée à des expressions régulières pour ajouter une balise au texte correspondant afin d'obtenir une mise en surbrillance. Enfin, le contenu traité est réinitialisé dans la zone de contenu.

4. Paramètre de style CSS :
   Afin d'améliorer l'effet de surbrillance, vous devez également définir le style du texte en surbrillance dans le fichier CSS. L'exemple de code est le suivant :

.highlighted {
    background-color: yellow;
    font-weight: bold;
}

Grâce aux étapes ci-dessus, vous pouvez implémenter la fonction de surlignage de texte sur la page. Une fois que l'utilisateur a saisi le texte qui doit être mis en surbrillance, cliquez sur le bouton pour mettre en surbrillance le contenu du texte correspondant. La puissance et la commodité de jQuery rendent la mise en œuvre de la mise en surbrillance de texte simple et efficace.

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!