Comment puis-je créer un effet de surbrillance de texte unique avec JavaScript ?

Surligner du texte avec JavaScript : un coup de projecteur ponctuel

Lorsqu'il s'agit de surligner du texte dans une page Web, nous avons souvent recours aux valeurs par défaut fonctionnalité du navigateur. Mais que se passe-t-il si vous avez besoin d’un effet de mise en lumière précis et ponctuel ? Voici comment y parvenir en utilisant JavaScript.

L'effet de surbrillance jQuery fournit une solution simple pour la surbrillance du texte. Mais si vous recherchez une approche JavaScript brute, considérez l'extrait de 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 faire correspondre notre effet de surbrillance avec le texte que nous souhaitons mettre en évidence, nous appliquons quelques règles CSS :

.highlight {
  background-color: yellow;
}

Maintenant, rassemblons tout cela. Nous créons un élément HTML avec l'ID "inputText" à l'endroit où nous voulons que la mise en évidence ait lieu. Nous ajoutons également un bouton avec l'événement onclick qui déclenche la fonction "highlight".

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

<div>

En cliquant sur le bouton "Highlight", le code JavaScript localise la première occurrence de "fox" dans le texte et l'entoure dans un élément avec la classe « highlight ». Cet élément span applique la couleur d'arrière-plan jaune, faisant ressortir le texte « renard ».

Cet exemple de code fournit une méthode simple mais efficace pour surligner le texte dans une page Web. Vous pouvez personnaliser le texte de recherche, surligner la couleur ou même étendre la fonctionnalité pour mettre en surbrillance plusieurs occurrences si nécessaire.

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!