Maison > interface Web > js tutoriel > Comment puis-je surligner du texte sur une page Web à l'aide de JavaScript ?

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

DDD
Libérer: 2024-12-08 11:18:12
original
896 Les gens l'ont consulté

How Can I Highlight Text on a Web Page Using 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 :

1

2

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

<div>

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal