Wie hebt man alle Vorkommen eines Wortes auf einer Seite mit Javascript oder jQuery hervor?

Ich habe eine Liste von Stichwörtern und dann eine Liste von Sätzen, die diese Stichwörter auf einer Seite enthalten. Ich möchte die Keyword-Liste anklickbar machen. Wenn ein Nutzer auf ein Keyword klickt, werden alle Vorkommen dieses Keywords in den Sätzen hervorgehoben.

Wie kann ich das mit jQuery oder rohem Javascript machen?

Die einzige Möglichkeit, die ich mir vorstellen kann, besteht darin, jedes Wort auf der Seite mit einer Klasse umzubrechen, die sich selbst als Klassennamen enthält. Erstellen Sie dann die Schlüsselwortschaltflächen, die den übereinstimmenden Wortklassen eine Hervorhebungsklasse hinzufügen. Das mag funktionieren, scheint aber eine Menge unnötiger Code-Injection zu sein.

List of Keywords

<button>this</button>
<button>example</button>

Sätze

<span class='word_this'>This</span> <span class='word_is'>is</span> <span class='word_an'>an</span> <span class='word_example'>example</span>.

Antworten auf die Frage(6)

Ihre Antwort auf die Frage