Maison > interface Web > js tutoriel > Comment puis-je mettre en évidence une occurrence de texte spécifique sur une page Web à l'aide de JavaScript ?

Comment puis-je mettre en évidence une occurrence de texte spécifique sur une page Web à l'aide de JavaScript ?

Mary-Kate Olsen
Libérer: 2024-12-07 13:00:16
original
230 Les gens l'ont consulté

How Can I Highlight a Specific Text Occurrence on a Web Page Using JavaScript?

Surlignage de texte avec JavaScript

Comment pouvez-vous surligner de manière sélective le texte d'une page Web à l'aide de JavaScript ? Le problème ici est de mettre en évidence une occurrence spécifique d'un texte, au lieu de chaque instance comme avec la fonctionnalité de recherche standard.

Solution JavaScript

L'effet de surbrillance jQuery est une solution appropriée. option pour surligner le texte. Cependant, pour une solution JavaScript native, considérez le code suivant :

function highlight(text) {
  const inputText = document.getElementById("inputText");
  const innerHTML = inputText.innerHTML;
  const index = innerHTML.indexOf(text);
  if (index >= 0) {
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}
Copier après la connexion

Pour terminer l'implémentation, vous aurez besoin de la règle CSS suivante :

.highlight {
  background-color: yellow;
}
Copier après la connexion

Utilisation

Créez un fichier HTML, collez le code et incluez un texte de saisie champ :

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

<div>
Copier après la connexion

Cliquez sur « Surligner » pour mettre 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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal