Wie kann ich mit jQuery ein bestimmtes Wort im Text hervorheben?

Ein Wort mit jQuery hervorheben

Frage:

Ein bestimmtes Wort in einem Textblock hervorheben. Markieren Sie beispielsweise „dolor“ im folgenden Text:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Erwartetes Ergebnis:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

jQuery-Lösung:

Ja, es ist möglich, diesen Effekt mit jQuery zu erzielen. Das folgende Code-Snippet bietet eine Lösung:

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

Erklärung:

1. $.fn.highlight ist eine benutzerdefinierte jQuery-Funktion, die ein Wort als verwendet Parameter.
2. Die Mustervariable erstellt ein reguläres Ausdrucksmuster, indem sie Sonderzeichen in der maskiert Wort.
3. Die Funktion „eached“ iteriert über alle übereinstimmenden Elemente (in diesem Fall Absatz-Tags) und ersetzt das Vorkommen des Worts durch ein umschlossenes -Tag.
4. Schließlich wird das Die Zeile $("p").highlight("dolor") ruft die benutzerdefinierte Funktion auf und übergibt „dolor“ als das zu verwendende Wort hervorgehoben.

Hinweis:

Es sind zahlreiche weitere jQuery-basierte Lösungen und externe Plugins verfügbar, die auf spezifische Bedürfnisse eingehen und zusätzliche Funktionen bieten. Entdecken Sie diese Optionen, um die beste Lösung für Ihre Anforderungen zu finden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery ein bestimmtes Wort im Text hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!