HTML Text Hintergrund für Wörter in einem Text

Question

Wenn ich Text mit einem Hintergrund anzeige schreibe ich dafür ein <span> Element

<div>
<h1>Title</h1>
<p>Das ist ein <span class="test">Snippet</span></p>
</div>

und mit CSS kann ich dann die Hintergrundfarbe ändern.

.test {
  color: red;
  background-color: grey;
}

Ich habe aber einen langen Text aus einer Datenbank und da sind keine HTML Elemente drin. Ich könnte in PHP den ganzen Text durchlaufen und alle Wörter in ein Div setzen aber kann ich das auch mit HTML oder Javascript?

Answer 1

Du kannst eine Liste mit den hervorzuhebenden Wörtern erstellen und das HTML mit einer Regular Expression dynamisch im Browser anzeigen.

window.onload = function() {
  const contentElement = document.getElementById("content");

  const text = contentElement.textContent; // Den Textinhalt des Div-Elements erhalten
  const wordsToHighlight = ["Lorem", "ipsum", "dolor"]; // Wörter, die markiert werden sollen

  for (const word of wordsToHighlight) {
    const regex = new RegExp(`\\b${word}\\b`, "gi");
    const newText = text.replace(regex, match => {
      return `<span class="highlight">${match}</span>`;
    });

    contentElement.innerHTML = newText;
  }
};