Comment puis-je surligner du texte sur une page Web à l'aide de JavaScript ?

Surligner du texte avec JavaScript

La surbrillance de texte sur une page Web est une fonctionnalité utile pour mettre en valeur des informations importantes ou attirer l'attention sur un contenu spécifique. Bien que diverses techniques existent, cet article explore une implémentation JavaScript simple :

Extrait de code :

La fonction JavaScript fournie, highlight(), met en évidence efficacement la première occurrence d'un texte spécifié dans un élément HTML donné (par exemple, un paragraphe). Voici comment cela fonctionne :

1. La fonction prend un seul argument (texte) comme sous-chaîne à mettre en surbrillance.
2. Elle récupère le texte saisi à partir de l'élément HTML avec l'ID "inputText ".
3. Il calcule l'index où le texte apparaît dans le texte d'entrée.
4. Si le texte est trouvé, il enveloppe le trouvé instance avec un "" élément contenant une classe « highlight », qui est définie dans la section CSS.

Exemple d'utilisation :

Pour utiliser cette fonction, incluez le code JavaScript dans votre document HTML et attachez un événement onClick à un bouton ou un lien. Lorsque vous cliquez dessus, l'événement déclenchera l'appel de fonction, en passant le texte à mettre en surbrillance en tant que paramètre. Par exemple :

<button onclick="highlight('fox')">Highlight</button>
<div>

Dans cet exemple, cliquer sur le bouton mettra en surbrillance la première occurrence du mot « fox » dans l'élément « inputText ».

Personnalisation CSS :

Vous pouvez personnaliser davantage l'apparence en surbrillance en remplaçant les styles de la classe "highlight" dans votre CSS. L'exemple donné applique une couleur d'arrière-plan jaune au texte en surbrillance, mais vous pouvez la modifier en fonction de vos besoins de conception.

En appliquant ces techniques, vous pouvez facilement surligner un texte spécifique sur une page Web, permettant aux utilisateurs de rapidement localisez et concentrez-vous sur les informations importantes.

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!