Wie kann ich mit JavaScript einen einmaligen Texthervorhebungseffekt erstellen?

Text mit JavaScript hervorheben: Ein einmaliges Spotlight

Wenn es darum geht, Text auf einer Webseite hervorzuheben, greifen wir oft auf die Standardeinstellung zurück Browserfunktionalität. Was aber, wenn Sie einen präzisen und einmaligen Hervorhebungseffekt benötigen? So können Sie dies mit JavaScript erreichen.

Der jQuery-Hervorhebungseffekt bietet eine unkomplizierte Lösung für die Texthervorhebung. Wenn Sie jedoch einen reinen JavaScript-Ansatz suchen, sollten Sie den folgenden Codeausschnitt in Betracht ziehen:

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 unseren Hervorhebungseffekt an den Text anzupassen, den wir hervorheben möchten, wenden wir einige CSS-Regeln an:

.highlight {
  background-color: yellow;
}

Jetzt lasst uns alles zusammenfassen. Wir erstellen ein HTML-Element mit der ID „inputText“, an dem die Hervorhebung erfolgen soll. Wir fügen außerdem eine Schaltfläche mit dem Onclick-Ereignis hinzu, die die Funktion „Hervorheben“ auslöst.

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

<div>

Durch Klicken auf die Schaltfläche „Hervorheben“ lokalisiert der JavaScript-Code das erste Vorkommen von „fox“ im Text und schließt es ein es innerhalb einer Element mit der Klasse „highlight“. Dieses Span-Element wendet die gelbe Hintergrundfarbe an, wodurch der „Fuchs“-Text hervorsticht.

Dieses Codebeispiel bietet eine einfache, aber effektive Methode zum Hervorheben von Text auf einer Webseite. Sie können den Suchtext anpassen, die Farbe hervorheben oder die Funktionalität bei Bedarf sogar erweitern, um mehrere Vorkommen hervorzuheben.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript einen einmaligen Texthervorhebungseffekt erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!