Maison >interface Web >tutoriel CSS >Comment puis-je utiliser jQuery pour rechercher et mettre en gras un texte spécifique dans un paragraphe ?

Comment puis-je utiliser jQuery pour rechercher et mettre en gras un texte spécifique dans un paragraphe ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-25 06:41:18316parcourir

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

Rechercher et mettre en gras du texte avec jQuery

Lorsque vous travaillez avec du contenu dynamique, il est essentiel d'utiliser les capacités de jQuery pour améliorer le texte et créer des effets visuels plus audacieux . Un scénario courant consiste à localiser une chaîne de texte spécifique dans un paragraphe et à lui appliquer une mise en forme en gras.

Cependant, vous pouvez rencontrer des problèmes avec le code suivant :

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

Pour surmonter ce problème, envisagez d'implémenter une solution robuste en utilisant la méthode html() de jQuery :

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

Ce code remplace toutes les occurrences de "world" par des balises fortes, mettant l'accent sur le texte à l'intérieur le paragraphe.

Pour une approche plus adaptable, vous pouvez également créer un petit plugin :

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

Ce plugin attribue une mise en forme en gras au texte contenant les mots spécifiés, fournissant un outil polyvalent pour personnaliser accentuation du texte dans vos applications.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn