Comment puis-je trouver de manière fiable et mettre en gras un texte spécifique dans un élément jQuery ?

Modification d'éléments de texte avec jQuery : rechercher et encourager

Dans jQuery, il est courant de manipuler les éléments DOM de manière dynamique. L'une de ces tâches consiste à rechercher un texte spécifique dans un élément donné et à modifier son apparence, par exemple en le mettant en gras.

Considérez le code suivant :

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

Dans cet exemple, nous essayons de recherchez le texte "cross genre" dans l'élément avec l'ID "about_theresidency" et appliquez CSS pour le mettre en gras. Cependant, cette approche risque de ne pas donner le résultat souhaité. Pour comprendre pourquoi, explorons une solution alternative :

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

Cette approche utilise la méthode replace() pour identifier et remplacer le texte « monde » par des balises HTML en gras. C'est un moyen plus fiable de rechercher et de modifier un texte spécifique car :

• Il cible l'intégralité du contenu HTML de l'élément, pas seulement ses nœuds de texte directs.
• Il utilise une expression régulière (/world/gi) pour effectuer une recherche insensible à la casse et un remplacement global.

Vous pouvez également créer un plugin réutilisable pour gérer cela fonctionnalité :

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

Utilisation :

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

Ce plugin vous permet d'envelopper facilement des mots spécifiques dans l'élément donné avec n'importe quelle balise HTML.

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!