Comment puis-je mettre efficacement en gras des chaînes de texte spécifiques dans du contenu chargé dynamiquement à l'aide de jQuery ?

Rechercher et mettre en gras des chaînes de texte avec jQuery

Trouver une chaîne de texte spécifique dans un élément et modifier son apparence est une tâche courante lorsque l'on travaille avec contenu dynamique. Dans jQuery, cela peut être fait efficacement. Cependant, si votre approche initiale ne donne pas les résultats souhaités, dépannons et trouvons une solution.

L'extrait de code que vous avez fourni vise à mettre en gras le texte contenant la chaîne "cross genre" dans un élément avec l'ID " about_theresidency." Bien que l'intention soit claire, il y a une petite erreur dans sa mise en œuvre :

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

Le problème réside dans le sélecteur ":contains", qui ne fonctionne pas bien lorsque le texte est chargé dynamiquement comme vous l'avez décrit. . Pour cibler efficacement le texte souhaité, nous pouvons utiliser la fonction replace() en conjonction avec html() :

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

Ce code remplace le texte "cross genre" par une version de balise forte, le mettant efficacement en gras.

Alternativement, vous pouvez également créer un plugin personnalisé pour encapsuler cette fonctionnalité :

$.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']
});

Avec ce plugin, vous pouvez désormais utiliser le Méthode wrapInTag() pour envelopper les mots spécifiés dans la balise souhaitée, par exemple « em » pour l'emphase ou « strong » pour le gras.

En incorporant ces correctifs, vous pouvez rechercher et modifier efficacement des chaînes de texte dans votre code jQuery , garantissant que le contenu dynamique est présenté avec le style souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!