Comment puis-je mettre en surbrillance un mot spécifique dans un texte à l'aide de jQuery ?

Surligner un mot avec jQuery

Question :

Surligner un mot particulier dans un bloc de texte. Par exemple, mettez en surbrillance « dolor » dans le texte suivant :

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Résultat attendu :

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Solution jQuery :

Oui, il est possible d'obtenir cet effet en utilisant jQuery. L'extrait de code suivant fournit une solution :

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

Explication :

1. $.fn.highlight est une fonction jQuery personnalisée qui prend un mot comme un paramètre.
2. La variable pattern crée un modèle d'expression régulière en échappant aux caractères spéciaux dans le mot.
3. La fonction each parcourt tous les éléments correspondants (balises de paragraphe dans ce cas) et remplace l'occurrence du mot par une balise enroulée autour de lui.
4. Enfin, le La ligne $("p").highlight("dolor") appelle la fonction personnalisée, en passant "dolor" comme mot à mis en évidence.

Remarque :

Il existe de nombreuses autres solutions basées sur jQuery et plugins externes disponibles, répondent à des besoins spécifiques et offrent des fonctionnalités supplémentaires. Explorez ces options pour trouver celle qui répond le mieux à vos besoins.

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!