Wie kann ich mit JavaScript ein bestimmtes Textvorkommen auf einer Webseite hervorheben?

Text mit JavaScript hervorheben

Wie können Sie Text auf einer Webseite mit JavaScript selektiv hervorheben? Die Wendung besteht hier darin, ein bestimmtes Vorkommen eines Textes hervorzuheben, anstatt jedes Vorkommen wie bei der Standardsuchfunktion.

JavaScript-Lösung

Der jQuery-Hervorhebungseffekt ist hierfür geeignet Option zum Hervorheben von Text. Berücksichtigen Sie jedoch für eine native JavaScript-Lösung den folgenden Code:

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

Um die Implementierung abzuschließen, benötigen Sie die folgende CSS-Regel:

.highlight {
  background-color: yellow;
}

Verwendung

Erstellen Sie eine HTML-Datei, fügen Sie den Code ein und fügen Sie einen Eingabetext ein Feld:

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

<div>

Klicken Sie auf „Hervorheben“, um das erste Vorkommen von „Fuchs“ gelb hervorzuheben.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript ein bestimmtes Textvorkommen auf einer Webseite hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!