Wie kann ich bestimmten Text in einem jQuery-Element zuverlässig finden und fett formatieren?

Textelemente mit jQuery ändern: Suchen und ermutigen

In jQuery ist es üblich, DOM-Elemente dynamisch zu bearbeiten. Eine dieser Aufgaben besteht darin, bestimmten Text innerhalb eines bestimmten Elements zu finden und sein Erscheinungsbild zu ändern, z. B. durch Fettschrift.

Betrachten Sie den folgenden Code:

$(window).load(function() {
  // ADD BOLD ELEMENTS
  $('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

In diesem Beispiel versuchen wir es Suchen Sie den Text „cross genre“ im Element mit der ID „about_theresidency“ und wenden Sie CSS an, um ihn fett darzustellen. Dieser Ansatz führt jedoch möglicherweise nicht zum gewünschten Ergebnis. Um zu verstehen, warum, schauen wir uns eine alternative Lösung an:

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&amp;</strong>'));

Dieser Ansatz verwendet die Methode replace(), um den Text „world“ zu identifizieren und durch fett gedruckte HTML-Tags zu ersetzen. Dies ist eine zuverlässigere Möglichkeit, bestimmten Text zu finden und zu ändern, weil:

• Es zielt auf den gesamten HTML-Inhalt des Elements ab, nicht nur auf seine direkten Textknoten.
• Es verwendet einen regulären Ausdruck (/world/gi), um eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung und eine globale Ersetzung durchzuführen.

Sie können auch ein wiederverwendbares Plugin erstellen, um dies zu handhaben Funktionalität:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // Case insensitive
    , replacement = '<'+ tag +'>$&amp;</'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

Verwendung:

$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

Mit diesem Plugin können Sie bestimmte Wörter innerhalb des angegebenen Elements einfach mit jedem HTML-Tag umschließen.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmten Text in einem jQuery-Element zuverlässig finden und fett formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!