Formater un nombre avec une expression régulière (1234567 => 1 234 567)

En gros je vais essayer d'expliquer comment écrire la regexp utilisée dans la ligne ci-dessous :

Code:

---

numberStr.replace(/(\d)(?=(\d{3})+$)/g, '$1 ');

---

Le but ici est de récupérer les nombres par groupe de 3 et de les séparer par un espace.
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 :

Code:

---

/(\d)/

---

// on veut tous les chiffres, on rajoute le flat "g" pour global

Code:

---

/\d/g

---

// on le capture car on aura besoin de le réutiliser dans la chaine de remplacement

Code:

---

/(\d)/g

---

// on utilise String.replace, en utilisant $1 et en mettant un espace après $1

Code:

---

"1234".replace(/(\d)/g, '$1 ');

---

// resultat :

Code:

---

"1 2 3 4 "

---

Ajout de l'espace entre chaque groupe de 3 chiffres
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

Code:

---

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 donc penser différemment pour écrire la regexp. Dans notre cas de formatage de nombre il suffit de se dire :
"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 :

Code:

---

/(\d)/g

---

On rajoute la règle qui veut que le chiffre soit toujours avant un groupe de 3 chiffres

Code:

---

/(\d)(\d{3})/g

---

Sauf qu'il faut clairement indiquer que le groupe de 3 chiffres est toujours situé à la fin, on rajoute donc $

Code:

---

/(\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:

---

/(\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..
ex :

Code:

---

1 2	> "12343222".replace(/(\d)(\d{3})+$/g, '$1 ') => "12 "

---

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:

---

/(\d)(?=(\d{3})+$)/g

---

Maintenant il ne reste plus qu'à utiliser la regexp :

Code:

---

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.

Code:

---

1 2 3 4

var num="1234567895" tabnum=num.split('').reverse().join('').match(/\d{1,3}/g) tabnum=tabnum.join(' ').split('').reverse().join('') alert(tabnum)

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

1 2 3 4

var num="1234567895" tabnum=num.split('').reverse().join('').match(/\d{1,3}/g) tabnum=tabnum.join(' ').split('').reverse().join('') alert(tabnum)

---

---

L'idée ici n'est pas d'apporter une solution au problème mais d'expliquer la construction d'une expression regulière

l'idée ici n'est pas d'apporter une solution au problème, mais de montrer une alternative plus simple .

Citation:

---

Envoyé par SpaceFrog

l'idée ici n'est pas d'apporter une solution au problème, mais de montrer une alternative plus simple .

---

plus simple... 3 splits, 2 join, 2 reverse, 1 match...

sujet également traité ici ...
http://javascript.developpez.com/faq...egExpMonetaire

essaye de benchmarker les deux, je pense que ta version est plus gourmande

justement, profitons en pour apporter une meilleure qualité à cette FAQ.
Ce que je déplore c'est que cette réponse de FAQ est dans la FAQ jquery, alors qu'elle aurait plus sa place dans la FAQ javascript, une fois qu'on a enlevé la partie de traitement et des events.
Car là le but étant juste d'avoir une chaine en entrée et une chaine en sortie.

Bonne explication, très intéressant :ccool:

Savoir jouer avec les subtilités des expressions régulière peut vite devenir un casse tête :aie:

Cependant je serais plus de l'avis de SpaceFrog, dans ce cas là.
Le séparateur de milliers exige une recherche de la droite vers la gauche, alors qu'il me semble que les expressions régulière utilisent un mécanisme d'analyse descendante, de gauche à droite? Même si leur implémentation inclut tout un tas d'optimisation, je me demande quand même si l'alternative de SpaceFrog ne serait pas plus rapide, enfin tout du moins pour de grande string?

Citation:

---

Envoyé par kimjoa

Bonne explication, très intéressant :ccool:

Savoir jouer avec les subtilités des expressions régulière peut vite devenir un casse tête :aie:

Cependant je serais plus de l'avis de SpaceFrog, dans ce cas là.
Le séparateur de milliers exige une recherche de la droite vers la gauche, alors qu'il me semble que les expressions régulière utilisent un mécanisme d'analyse descendante, de gauche à droite? Même si leur implémentation inclut tout un tas d'optimisation, je me demande quand même si l'alternative de SpaceFrog ne serait pas plus rapide, enfin tout du moins pour de grande string?

---

En fait, la regexp telle qu'elle est écrite dit : tu va me chercher tous les chiffres qui sont forcément suivi de n*3 chiffres.
Donc oui comme il y a le $ au bout, la regexp doit aller tout à la droite.
Mais force est de constater que ma méthode est moins couteuse que celle de SpaceFrog
http://jsperf.com/formatnumberregexp/3
http://hfr-rehost.net/http://self/pi...e48e077880.png

Ok, sympas le bench, ca fait plusieurs fois que je tombe sur ce site, il va falloir que je m'y penche un peu !!

Sinon, c'est sur que pour des petites chaines, et comme c'est souvent le cas dans ce genre de teste, c'est certe plus rapide, mais augmente le nombre de caractère....

Enfin, c'était pas forcement l'objet de ton poste, bien au contraire, je le répète il est très instructif, même moi, qui "mange" pas mal de regex, une solution, même pour un problème si simple, ne viens pas du premier coup, et tes explications, sont les bienvenue :ccool:

Juste une petite remarque... le pattern lookahead, ne signifie pas que "ne capture pas le groupe", mais surtout, teste si après y'a pas ce modèle.... Sinon faut utiliser (?:...).

Citation:

---

Envoyé par kimjoa

Ok, sympas le bench, ca fait plusieurs fois que je tombe sur ce site, il va falloir que je m'y penche un peu !!

Sinon, c'est sur que pour des petites chaines, et comme c'est souvent le cas dans ce genre de teste, c'est certe plus rapide, mais augmente le nombre de caractère....

Enfin, c'était pas forcement l'objet de ton poste, bien au contraire, je le répète il est très instructif, même moi, qui "mange" pas mal de regex, une solution, même pour un problème si simple, ne viens pas du premier coup, et tes explications, sont les bienvenue :ccool:

Juste une petite remarque... le pattern lookahead, ne signifie pas que "ne capture pas le groupe", mais surtout, teste si après y'a pas ce modèle.... Sinon faut utiliser (?:...).

---

Oui j'ai modifié le texte, mais je crois que j'ai pas tout modifié.
Et si on ne capture pas le groupe, en fait ça fait n'importe quoi, donc il faut utiliser le pattern ?= (lookahead "followed by")

En continuant de tester niveau rapidité, je tombe sur des résultats curieux :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nouvelle page 1</title> </head> <body> <script type="text/javascript"> var foo = 1234567890;   function Arn_1(num){ return (num+'').replace(/(\d)(?=(\d{3})+$)/g, '$1 '); }   function fN_1(num) { tabnum = (num+'').match(/\d/g) tnl=tabnum.length+1 tt=''; i=0; idx=0; while (--tnl >0){ (tnl%3===0 )&& (tt+=" "); tt+=tabnum[i++]; } return tt; }   function fN_2(num) { tabnum = (num+'').split('').reverse().join('').match(/\d{1,3}/g).join(' ').split('').reverse().join('') return tabnum; }   function fN_3(num) { num=''+num; s=(num.length)%3; return num.substr(0,s)+" "+num.substr(s).match(/\d{3}/g).join(' '); }     /**  * Figure out how long it takes for a method to execute.  *  * @param {func} method to test  * @param {int} iterations number of executions.  * @param {Array} args to pass in.  * @param {T} context the context to call the method in.  * @return {int} the time it took, in milliseconds to execute.  */ var bench = function (method, iterations, args, context) {   var time = 0; var timer = function (action) { var d = +(new Date); if (time < 1 || action === 'start') { time = d; return 0; } else if (action === 'stop') { var t = d - time; time = 0; return t; } else { return d - time; } };   var result = []; var i = 0; timer('start'); while (i < iterations) { result.push(method.apply(context, args)); i++; }   var execTime = timer('stop'); var output= method.toString().replace(/\n/g, '<br/>')+"<br/>"; output+='<div style="color:green">Temps moyen : ' + execTime / iterations +"<br/>"; output+="Temps Total : "+ execTime +"<br/>"; output+="résultat : "+ result[0]+"<br/><br/></div>"; var res=document.createElement('div') res.innerHTML=output document.body.appendChild(res)   return execTime; }; bench(Arn_1, 10000, [foo], this)   bench(fN_1, 10000, [foo], this) bench(fN_2, 10000, [foo], this) bench(fN_3, 10000, [foo], this)   </script> </body>   </html>

---

Citation:

---

function Arn_1(num) {
return (num + "").replace(/(\d)(?=(\d{3})+$)/g, "$1 ");
}
Temps moyen : 0.0065
Temps Total : 65
résultat : 1 234 567 890

function fN_1(num) {
tabnum = (num + "").match(/\d/g);
tnl = tabnum.length + 1;
tt = "";
i = 0;
idx = 0;
while (--tnl > 0) {
tnl % 3 === 0 && (tt += " ");
tt += tabnum[i++];
}
return tt;
}
Temps moyen : 0.0047
Temps Total : 47
résultat : 1 234 567 890

function fN_2(num) {
tabnum = (num + "").split("").reverse().join("").match(/\d{1,3}/g).join(" ").split("").reverse().join("");
return tabnum;
}
Temps moyen : 0.007
Temps Total : 70
résultat : 1 234 567 890

function fN_3(num) {
num = "" + num;
s = num.length % 3;
return num.substr(0, s) + " " + num.substr(s).match(/\d{3}/g).join(" ");
}
Temps moyen : 0.0028
Temps Total : 28
résultat : 1 234 567 890

---

il semblerait que la fN_3 soit plus rapide ???


chrome et IE me retournent des résultats quasi inverses ???

Citation:

---

function Arn_1(num){
return (num+'').replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
}

Temps moyen : 0.0094
Temps Total : 94
résultat : 1 234 567 890


function fN_1(num) {
tabnum = (num+'').match(/\d/g)
tnl=tabnum.length
tt='';
i=-1;
while (++i < tnl){
((tnl-i)%3===0 )&& (tt+=" ");
tt+=tabnum[i];
}
return tt;
}

Temps moyen : 0.0406
Temps Total : 406
résultat : 1 234 567 890


function fN_2(num) {
tabnum = (num+'').split('').reverse().join('').match(/\d{1,3}/g).join(' ').split('').reverse().join('')
return tabnum;
}

Temps moyen : 0.0563
Temps Total : 563
résultat : 1 234 567 890


function fN_3(num) {
num=''+num;
s=(num.length)%3;
return num.substr(0,s)+" "+num.substr(s).match(/\d{3}/g).join(' ');
}

Temps moyen : 0.0172
Temps Total : 172
résultat : 1 234 567 890

---

Spacefrog, visiblement tu ne sais pas très bien utiliser JSPerf :)
Regexp is better
http://jsperf.com/formatnumberregexp/5
J'ai cleané un peu les jeux de test et relancé quelques tests.
Voilou :)

je ne vois pas ce qui explique les resultats obtenus avec mon benchmark ...

Citation:

---

Envoyé par SpaceFrog

je ne vois pas ce qui explique les resultats obtenus avec mon benchmark ...

---

regarde mon lien, j'ai les même résultats que toi. J'ai l'impressions que certains modules des moteurs JS sont plus performants.

Bon pour ma part, j'ai fini de me palucher sur ce topic, même si c'était très intéressant.

Je reviendrais avec un autre petit cours :)

Bon alors :
Avec un petit nombre :
http://jsperf.com/formatnumberregexp/5
http://hfr-rehost.net/http://self/pi...95fa4d1a30.png

Avec un grand nombre :
http://jsperf.com/formatnumberregexp/6
http://hfr-rehost.net/http://self/pi...929cab5401.png

heu non pas mes même resultats

sous ffx 14 :
Arn_1 : 65
fN_1 : 47
fN_3 : 28

et là je ne suis pas sur des ittérrations, mais sur un temps d'exécution

donc a priori pour ffx 14 fN_3 et 2 win vs Arn_1

Citation:

---

Envoyé par SpaceFrog

heu non pas mes même resultats

sous ffx 14 :
Arn_1 : 65
fN_1 : 47
fN_3 : 28

et là je ne suis pas sur des ittérrations, mais sur un temps d'exécution

donc a priori pour ffx 14 fN_3 et 2 win vs Arn_1

---

j'ai corrigé ton code car tes variables dans tes fonctions étaient globales. A mon avis ça consomme en performance aussi
edit : putain, ça consomme un max d'utiliser des variables globales :
http://jsperf.com/test-global-local

http://hfr-rehost.net/http://self/pi...25188e2651.png

celà n'explique cependant toujours pas pourquoi en benchmark de temps fn_4 serait plus efficace que Arn_1 sur ffx 14 ...

De mon coté, j'ai testé une petite fonction (la b)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

function a(num){ return (num + '').replace(/(\d)(?=(\d{3})+$)/g, '$1 '); }   function b(num){   var buffer = [], l = Math.ceil(num.length / 3), i = num.length - 3, sub;   while(l != 1){   sub = num.substr(i, 3);   if(/^\d$/.test(sub)) return num;   buffer[--l] = sub; i -= 3; }   buffer[0] = num.substr(0, 3 + i );   return buffer.join(' ');   }   function c(num){   num = '' + num; var s = (num.length) % 3; return num.substr(0, s) + " " + num.substr(s).match(/\d{3}/g).join(' '); }     var date = new Date(); for(var i = 0; i < 300000; i++){ a('1234567890'); }   alert(new Date - date)   var date = new Date();   for(var i = 0; i < 300000; i++){ b('123456789'); } alert(new Date - date)   var date = new Date();   for(var i = 0; i < 300000; i++){ c('123456789'); } alert(new Date - date)

---

résultat sous FF 10:
a -> 1008
b -> 205
c -> 253

FF étant un peu lent en ce qui concerne les reg exp

sous chrome 21
a->341
b -> 146
c ->255

Citation:

---

putain, ça consomme un max d'utiliser des variables globales :

---

Sans doute, car d'une y'a un niveau de scope supplémentaire à effectuer pour l'interpréteur , et de deux, il y'a énormément de global, qui ne sont pas toute des constantes, donc un gros dico (hash) à passer en revue !

Edit -> correction d'une petite coquille !

kimjoa tu es en temps, pas en itérations ...
donc regexp est bien plus long d'après les résultats non ????