Wie kann ich mit jQuery bestimmte Textzeichenfolgen innerhalb eines Absatzes fett formatieren?

Textzeichenfolgen in jQuery fett formatieren

Sie suchen eine jQuery-Lösung, um eine bestimmte Textzeichenfolge innerhalb eines Absatzes durch Fettschrift hervorzuheben. Ihr Code liefert jedoch nicht das gewünschte Ergebnis:

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

Dieser Code zielt darauf ab, den Text mit der Phrase „cross genre“ innerhalb des Elements mit der ID „about_theresidency“ anzusprechen und die CSS-Eigenschaft „font“ anzuwenden -weight“, um es fett zu machen. Es bleibt jedoch wirkungslos.

Lösung

Um Textzeichenfolgen mit jQuery fett darzustellen, können Sie die Methode replace() zusammen mit html() verwenden. Der folgende Code zeigt, wie:

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

Dieser Codeausschnitt:

1. Speichert den HTML-Inhalt des Absatzes in der HTML-Variablen.
2. Verwendet das Ersetzen( )-Methode in HTML, um alle Vorkommen des Textes „world“ zu finden (ohne Berücksichtigung der Groß-/Kleinschreibung) und ihn in einzubinden. Tags.
3. Aktualisiert den HTML-Inhalt des Absatzes mit der geänderten Zeichenfolge, um die Fettformatierung anzuwenden.

Zusätzlicher Tipp

Der Code kann zu einem Plugin verfeinert werden:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // case insensitive
    , replacement = '$&'+ 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 bestimmte Wörter in HTML-Tags einschließen. Im bereitgestellten Beispiel werden die Wörter „world“ und „red“ in eingeschlossen. Tags.

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