Category

jQuery

Category

Contourner la fonction PHP ucfirst() avec le jQuery

Dans cet article, je vais vous parler de la fonction PHP ucfirst().

Par définition, cette fonction sert à transformer le premier caractère en majuscule de la chaîne de caractères.

Exemple #1 avec ucfirst()

<?php  
$foo = 'bonjour tout le monde!';  
$foo = ucfirst($foo);   // Bonjour tout le monde!  
?>

Notez que les caractères tels que les voyelles accentuées (comme é, è ou à) ne seront pas converties.

D’où le problème avec la langue française! Il arrive à plusieurs moments que nos phrases commencent par des caractères spéciaux.

Exemple #2 avec ucfirst() et un caractère spécial

<?php  
$foo = 'étant donné que les membres...';  
$foo = ucfirst($foo);   // étant donné que les membres...;  
?>

Comment contourner le problème de la fonction ucfirst() avec le jQuery?

Durant un projet que j’avais à développer avec Okidoo Interactif, je devais charger plusieurs données avec le PHP et la fonction ucfirst() avait été appliquée.

Afin de réussir à générer les premiers caractères accentués, j’ai utilisé le jQuery() afin d’y arriver.

Le code HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <p class="test">étant donné <strong>que... C'est en gras</strong></p>
  <p class="test">Avoir su <em> que... </em></p>
  <p class="test">ûn caractère spécial</p>
  <p class="test">Un caractère normal</p>
</body>
</html>

Dans le code ci-dessus, vous avez une série d’éléments de paragraphe ayant la classe « test ». Pour chaque élément, j’y ai appliqué un caractère différent.

À ne pas oublié que la fonction PHP ucfirst() a été simulée et que deux phrases ont encore un caractère en minuscule.

Il est temps de passer le jQuery() afin de rendre les caractères spéciaux en majuscule seulement s’ils sont en première position de la chaîne de caractères.

Le code jQuery

$(document).ready(function()
{
   $('.test').each(function()
   {
     var firstLetter = $(this).text().charAt(0);
    
     firstLetter = firstLetter.toUpperCase();
  
     var myString = $(this).html();
     var myStringMoinsUn = myString.substr(1);
  
     $(this).html(firstLetter + '' + myStringMoinsUn);
  
   });
});

À la ligne #3, je passe en boucle tous les éléments ayant la classe= »test ».

À la ligne #5, je ramasse le premier caractère à l’aide de la fonction javascript charAt().

À la ligne #7, je transforme ce caractère en majuscule à l’aide de la fonction javascript toUpperCase().

Les deux prochaines lignes servent en premier temps à reprendre tout le HTML compris dans l’élément ayant la classe= »test ». Je prends le html() eu lieu du text() car vous pouvez voir que certains éléments on du code spécial.

Je soustrais ensuite le premier caractère de cette variable. Nous aurions donc quelque chose du genre au rendu:

tant donné <strong>que... C'est en gras</strong>

Il va simplement nous manquer à rejoindre les deux variables ensembles et les remplacer par dessus chaque éléments bouclés.

Nous allons donc avoir un rendu fonctionnel qui contourne la fonction PHP ucfirst().

Étant donné <strong>que... C'est en gras</strong>
Avoir <em>su que...</em>
Ûn caractère spécial
Avoir le temps

Conclusion

En terminant, c’est évident que la fonction ucfirst() fait une bonne partie du travail et que le jQuery peut affecter la rapidité ou le poids d’une page Web, mais parfois, pour certains projets, nous en avons pas le choix.

Je tenais à partager ce code avec vous afin qu’il puisse aider au moins une personne dans le futur.

Je vous laisse enfin un lien vers une démo.

Voir la démo