Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery bestimmte Textzeichenfolgen in dynamisch geladenen Inhalten effizient fett formatieren?

Wie kann ich mit jQuery bestimmte Textzeichenfolgen in dynamisch geladenen Inhalten effizient fett formatieren?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-24 18:53:141004Durchsuche

How Can I Efficiently Bold Specific Text Strings within Dynamically Loaded Content Using jQuery?

Textzeichenfolgen mit jQuery suchen und fett formatieren

Eine bestimmte Textzeichenfolge innerhalb eines Elements zu finden und ihr Erscheinungsbild zu ändern, ist eine häufige Aufgabe bei der Arbeit mit dynamischer Inhalt. In jQuery kann dies effizient erreicht werden. Wenn Ihr erster Ansatz jedoch nicht zu den gewünschten Ergebnissen führt, lassen Sie uns den Fehler beheben und eine Lösung finden.

Das von Ihnen bereitgestellte Code-Snippet zielt darauf ab, Text, der die Zeichenfolge „cross genre“ enthält, innerhalb eines Elements mit der ID „fett“ darzustellen. about_theresidency.“ Obwohl die Absicht klar ist, gibt es einen kleinen Fehler in der Implementierung:

$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});

Das Problem liegt im Selektor „:contains“, der nicht gut funktioniert, wenn der Text wie von Ihnen beschrieben dynamisch geladen wird . Um den gewünschten Text effektiv anzusprechen, können wir die Funktion replace() in Verbindung mit html() verwenden:

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

Dieser Code ersetzt den „genreübergreifenden“ Text durch eine starke Tag-Version und macht ihn effektiv fett.

Alternativ können Sie auch ein benutzerdefiniertes Plugin erstellen, um diese Funktionalität zu kapseln:

$.fn.wrapInTag = function(opts) {

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

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

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

Mit diesem Plugin können Sie jetzt das verwenden wrapInTag()-Methode zum Umschließen bestimmter Wörter in das gewünschte Tag, z. B. „em“ für Hervorhebung oder „strong“ für Fettdruck.

Durch die Integration dieser Korrekturen können Sie Textzeichenfolgen in Ihrem jQuery-Code effizient finden und ändern , um sicherzustellen, dass dynamische Inhalte im gewünschten Stil präsentiert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery bestimmte Textzeichenfolgen in dynamisch geladenen Inhalten effizient fett formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn