Maison >interface Web >js tutoriel >Comment puis-je mettre en évidence une seule instance de texte en JavaScript ?
Surligner du texte avec JavaScript
La surbrillance d'un texte spécifique sur une page Web peut améliorer l'expérience utilisateur et attirer l'attention sur un contenu important. Cette démonstration se concentre sur une mise en évidence d'une seule occurrence, contrairement à l'effet de surbrillance typique qui identifie toutes les instances du texte, qui est couramment utilisé dans la fonctionnalité de recherche.
Effet de surbrillance jQuery
Pour une solution rapide et facile, l'effet de surbrillance jQuery peut être utilisé :
$(selector).highlight(text, options);
Spécifiez simplement le texte et les options de surbrillance pour obtenir le résultat souhaité. résultat.
Code JavaScript personnalisé
Si vous préférez une approche JavaScript brute, considérez cet extrait de code :
function highlight(text) { // Get the target element var inputText = document.getElementById("inputText"); // Extract the element's HTML content var innerHTML = inputText.innerHTML; // Locate the first occurrence of the text var index = innerHTML.indexOf(text); // Check if text is found if (index >= 0) { // Inject highlight markup around the matching text innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length); // Update the element with highlighted text inputText.innerHTML = innerHTML; } }
N'oubliez pas de ajoutez le style CSS correspondant pour la classe 'highlight' :
.highlight { background-color: yellow; }
Utilisation Exemple
Pour mettre en surbrillance le mot « renard » dans un élément div spécifique, invoquez simplement la fonction de surbrillance :
<button onclick="highlight('fox')">Highlight</button> <div>
Cliquer sur le bouton mettra en surbrillance la première occurrence de « renard » en jaune.
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!