Comment puis-je mettre en évidence une seule instance de texte en JavaScript ?

Surligner du texte avec JavaScript

La surbrillance d'un texte spécifique sur une page Web peut améliorer l'expérience utilisateur et attirer l'attention sur un contenu important. Cette démonstration se concentre sur une mise en évidence d'une seule occurrence, contrairement à l'effet de surbrillance typique qui identifie toutes les instances du texte, qui est couramment utilisé dans la fonctionnalité de recherche.

Effet de surbrillance jQuery

Pour une solution rapide et facile, l'effet de surbrillance jQuery peut être utilisé :

$(selector).highlight(text, options);

Spécifiez simplement le texte et les options de surbrillance pour obtenir le résultat souhaité. résultat.

Code JavaScript personnalisé

Si vous préférez une approche JavaScript brute, considérez cet extrait de code :

function highlight(text) {
  // Get the target element
  var inputText = document.getElementById("inputText");

  // Extract the element's HTML content
  var innerHTML = inputText.innerHTML;

  // Locate the first occurrence of the text
  var index = innerHTML.indexOf(text);

  // Check if text is found
  if (index >= 0) { 
    // Inject highlight markup around the matching text
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>"
                + innerHTML.substring(index, index + text.length) + "</span>"
                + innerHTML.substring(index + text.length);

    // Update the element with highlighted text
    inputText.innerHTML = innerHTML;
  }
}

N'oubliez pas de ajoutez le style CSS correspondant pour la classe 'highlight' :

.highlight {
  background-color: yellow;
}

Utilisation Exemple

Pour mettre en surbrillance le mot « renard » dans un élément div spécifique, invoquez simplement la fonction de surbrillance :

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

<div>

Cliquer sur le bouton mettra 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!