Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery bestimmten Text in einem Absatz finden und fett formatieren?

Wie kann ich mit jQuery bestimmten Text in einem Absatz finden und fett formatieren?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-25 06:41:18325Durchsuche

How Can I Use jQuery to Find and Bold Specific Text Within a Paragraph?

Text mit jQuery suchen und fett formatieren

Bei der Arbeit mit dynamischen Inhalten ist es wichtig, die Funktionen von jQuery zu nutzen, um Text zu verbessern und kräftigere visuelle Effekte zu erzeugen . Ein häufiges Szenario besteht darin, eine bestimmte Textzeichenfolge in einem Absatz zu finden und sie fett zu formatieren.

Es können jedoch Probleme mit dem folgenden Code auftreten:

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

Um dieses Problem zu beheben, Erwägen Sie die Implementierung einer robusten Lösung mit der html()-Methode von jQuery:

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

Dieser Code ersetzt alle Vorkommen von „world“ durch starke Tags und betont den Text innerhalb der Absatz.

Für einen anpassungsfähigeren Ansatz können Sie auch ein kleines Plugin erstellen:

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

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

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

Dieses Plugin weist Text, der die angegebenen Wörter enthält, Fettformatierung zu und bietet so ein vielseitiges Tool zum Anpassen von Text Schwerpunkt in Ihren Bewerbungen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery bestimmten Text in einem Absatz finden und 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