Wie kann ich eine einzelne Textinstanz in JavaScript hervorheben?

Text mit JavaScript hervorheben

Das Hervorheben von bestimmtem Text auf einer Webseite kann die Benutzererfahrung verbessern und die Aufmerksamkeit auf wichtige Inhalte lenken. Diese Demonstration konzentriert sich auf die Hervorhebung eines einzelnen Vorkommens, im Gegensatz zum typischen Hervorhebungseffekt, der alle Instanzen des Textes identifiziert, der üblicherweise in Suchfunktionen verwendet wird.

jQuery-Hervorhebungseffekt

Für eine schnelle und einfache Lösung kann der jQuery-Hervorhebungseffekt verwendet werden:

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

Geben Sie einfach den zu erreichenden Text und die Hervorhebungsoptionen an Ihr gewünschtes Ergebnis.

Benutzerdefinierter JavaScript-Code

Wenn Sie einen reinen JavaScript-Ansatz bevorzugen, sollten Sie dieses Code-Snippet in Betracht ziehen:

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;
  }
}

Nicht Vergessen Sie, den entsprechenden CSS-Stil für die Klasse „Highlight“ hinzuzufügen:

.highlight {
  background-color: yellow;
}

Verwendung Beispiel

Um das Wort „fox“ in einem bestimmten div-Element hervorzuheben, rufen Sie einfach die Hervorhebungsfunktion auf:

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

<div>

Durch Klicken auf die Schaltfläche wird das erste Vorkommen von „fox“ hervorgehoben. in gelb.

Das obige ist der detaillierte Inhalt vonWie kann ich eine einzelne Textinstanz in JavaScript hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!