Maison >interface Web >js tutoriel >Comment JavaScript peut-il mettre en évidence une seule instance de texte sur une page Web ?

Comment JavaScript peut-il mettre en évidence une seule instance de texte sur une page Web ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-02 22:08:11612parcourir

How Can JavaScript Highlight Only One Instance of Text on a Web Page?

Surligner du texte avec JavaScript

Cette question recherche une fonction JavaScript capable de surligner du texte sur une page Web, avec une exigence spécifique de surligner uniquement une occurrence du texte. Examinons la solution fournie et explorons comment implémenter cette fonctionnalité.

Effet de surbrillance jQuery

Le répondant suggère d'utiliser l'effet de surbrillance jQuery pour cette tâche. Cependant, le code fourni démontre une implémentation JavaScript brute qui permet une mise en évidence précise.

Implémentation JavaScript

Pour mettre en évidence un texte spécifique, le code JavaScript s'initialise en identifiant le texte élément dans la page. Ensuite, il recherche le texte cible dans le code HTML interne de l'élément. S'il est trouvé, le code crée dynamiquement un élément span avec une classe « highlight » autour du texte cible. Cet élément span est ensuite réinjecté dans la page, en enveloppant le texte cible et en appliquant le style de surbrillance souhaité.

Utilisation et mises en garde

Pour utiliser le code fourni, vous devez incorporer les extraits de code JavaScript et CSS dans un document HTML. Lorsque vous cliquez sur l'élément bouton avec l'attribut onclick="highlight('fox')", le code localise et met en surbrillance la première occurrence du mot "fox" dans le div "inputText".

Cela vaut la peine de le noter. que cette approche convient aux tailles de texte plus petites et à une seule occurrence de texte. Pour des besoins de mise en évidence plus étendus, il peut être préférable de tirer parti d'une solution plus complète ou d'envisager des techniques alternatives.

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!

Déclaration:
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