Comment puis-je mettre en évidence une occurrence de texte spécifique sur une page Web à l'aide de 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;
  }
}

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

.highlight {
  background-color: yellow;
}

Utilisation

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

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

<div>

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!