En gros je vais essayer d'expliquer comment écrire la regexp utilisée dans la ligne ci-dessous :
Le but ici est de récupérer les nombres par groupe de 3 et de les séparer par un espace.
Code : Sélectionner tout - Visualiser dans une fenêtre à part numberStr.replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
ex : 1234567 => 1 234 567
Les différents formatages possibles sont :
X
XX
XXX
X XXX
XX XXX
XXX XXX
X XXX XXX
XX XXX XXX
etc…
Cette liste va nous permettre de mieux réfléchir à la construction de l'expression régulière.
Les outils :
Parmi les outils dont nous disposons :
- String.replace
- Les groupes de capture
- les variables prédéfinies : $1…$9, elles contiennent la valeur du groupe de capture récupéré.
Ajout de l'espace :
Le premier test consiste à rajouter un espace après un chiffre.
// On déclare le fichier dans la RegExp :
// on veut tous les chiffres, on rajoute le flat "g" pour global
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)/
// on le capture car on aura besoin de le réutiliser dans la chaine de remplacement
Code : Sélectionner tout - Visualiser dans une fenêtre à part /\d/g
// on utilise String.replace, en utilisant $1 et en mettant un espace après $1
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)/g
// resultat :
Code : Sélectionner tout - Visualiser dans une fenêtre à part "1234".replace(/(\d)/g, '$1 ');
Ajout de l'espace entre chaque groupe de 3 chiffres
Code : Sélectionner tout - Visualiser dans une fenêtre à part "1 2 3 4 "
Maintenant c'est là que c'est plus compliqué, car le but est de rajouter un espace tous les 3 chiffres, mais en répondant au critère de formatage de la liste définie plus haut.
// on rajoute un espace après 3 chiffres
Il faut donc penser différemment pour écrire la regexp. Dans notre cas de formatage de nombre il suffit de se dire :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 "123456".replace(/(\d{3})/g,"$1 "); > 123 456 //OK "1234567".replace(/(\d{3})/g,"$1 "); > "123 456 7" //NOK
"Il faut rajouter un espace après chaque chiffre qui est forcément suivi par N groupe de 3 chiffres".
Exemple :
1234567 => on va rajouter un espace après le 1 car il est suivi du groupe 234 et 567, et on va rajouter un espace après le 4, car il est suivi de 567
12345678 => on va rajouter un espace apres le 2 car il est suivi du groupe 345 et 678, et on va rajouter un espace après le 5, car il est suivi de 678
On remarquera alors que "12" sont bien séparés des autres groupes
Donc 12345678 => 12 345 678.
Si vous me suivez jusque là on peut attaquer la regexp finale
Ecriture de la regexp finale :
On reprend notre regexp précédente :
On rajoute la règle qui veut que le chiffre soit toujours avant un groupe de 3 chiffres
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)/g
Sauf qu'il faut clairement indiquer que le groupe de 3 chiffres est toujours situé à la fin, on rajoute donc $
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)(\d{3})/g
Pour le moment ça ne marche qu'avec un seul groupe de 3 chiffres, il faut rajouter un + pour indiquer qu'on aura 1 ou plusieurs groupe de 3 chiffres
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)(\d{3})$/g
Il y a cependant un problème, la regexp est écrite de manière à capturer toute la chaîne, du coup, malgré le flag "g", la regexp ne boucle qu'une seule fois..
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)(\d{3})+$/g
ex :
Il faut donc indiquer qu'on ne capture pas le deuxième terme, mais qu'on l'utilise pour indiquer que notre chiffre est toujours suivi par des groupes de 3 chiffres. On l'indique en utilisant ?=
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 > "12343222".replace(/(\d)(\d{3})+$/g, '$1 ') => "12 "
Maintenant il ne reste plus qu'à utiliser la regexp :
Code : Sélectionner tout - Visualiser dans une fenêtre à part /(\d)(?=(\d{3})+$)/g
Code : Sélectionner tout - Visualiser dans une fenêtre à part var formattedNumber = number.replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
PS : ce n'est pas parfait, mais si vous avez des questions, je suis preneur, ça me permettra d'expliquer plus clairement.
Partager