Discussion :

[vermine]

Dernièrement j'ai (re)découvert en Java cette écriture-ci:

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
String chaine = String.Format("Hello %s !", "World");

Qui donne comme résultat:

Hello World !

Je me suis dit: "Géééééniiiaaaal! On peut ajouter des paramètres à la chaine!!!". Alors je me suis renseigné et j'ai remarqué que ce n'était rien de nouveau sous le soleil, étant donné que c'est la méthode String.Format.
Un truc classique qui formate les valeurs passées en paramètres et qui tire son origine sans doute du printf du C.

Prout, j'étais fort déçu.
Puis, j'ai cherché la version de String.Format en Javascript. Pas trouvée.

Donc, je m'y suis mis. D'où m'a demande sur les RegExp à laquelle javatwister a aimablement répondu. Merci à lui, d'ailleurs.
Bref, j'ai défini mes tags:

Chaine de caractères: %s, %sl, %su, %sx
Entier: %n, %nbase
Float: %f, %.chiffres, %f,chiffres
Date: %d('format')

Avec la regexp suivante:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

var reg_exp_total = /%s\w?|%n\d*|%f[\.,]\d+|%d\('[^\)]+'\)/g;

C'est là que le code de javatwister m'intéressait beaucoup. Premièrement, on compte le nombres d'occurences:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

var occurences = chaine.match(reg_exp_total).length;

Ensuite on boucle sur les occurences et on "retire" de la chaine la partie dont on vient de s'occuper:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
chaine2 = chaine;
var reg_exp = /%s\w?|%n\d*|%f[\.,]\d+|%d\('[^\)]+'\)/;
var r = chaine2.match(reg_exp); // 1ère correspondance trouvée
var q += r.index+r[0].length; // incrémentation de "q";
chaine2 = chaine.substring(q);// on retranche les premiers caractères de chaine2, jusqu'à q;

Pendant ce temps-là, j'ai fait un traitement sur la chaine selon le tag trouvé et le formatage voulu.
Y a plus qu'à remplacer le tag par le formatage:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
chaine3 = chaine;
chaine3 = chaine3.replace(reg_exp, param);

Petit à petit, chaine2 diminue et chaine3 grandit tandis que chaine reste la même afin de garder la position des tags.
Pour le formatage en lui-même, je fais un switch sur le tag trouvé et j'applique des méthodes fort connues comme:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
toLowerCase();
toUpperCase();
parseInt();
parseFloat();
toFixed();

Puis je m'occupe des dates. Donc la date est décrite ainsi:

Nous sommes le %d('$dd/$mm/$yyyy').

J'utilise le même principe avec pour regexp ceci (elle est sûrement à retravailler):

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var reg_exp_total = /\$dd\b|\$ddd|\$mm\b|\$mmm|\$yy\b|\$yyyy|\$hh|\$PM|\$mi\b|\$ss|\$milli/g;

J'appelle la même méthode en lui précisant que je manipule une date (le paramètre à passer est un objet Date).
D'où certains if-else un peu partout afin d'obtenir une seule fonction pour les deux types de cas.
Ici, j'utilise les méthodes de l'objet Date:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
getDate();
getDay();
getMonth();
getYear();
getFullYear();
getHours();
getMinutes();
getSeconds();
getMilliseconds();

Et le tour est joué.
Bien entendu, le script peut-être complété et amélioré. Il y a moyen de faire planter le programme ou d'obtenir des choses affreuses, mais le principe est là.
Je vous ai mis une page de test avec un exemple déjà lancé. Vous pouvez lancer vos propres exemples sauf si vous désirez manipuler les dates, vu qu'il faut un objet Date.


Edit: Ajout du code de SpaceFrog pour la page de test.

[SpaceFrog]

Il se fait tard, je suis fatigué
je n'arrive qu'a obtenir:
"Erreur de paramètres"

Sans doute parceque je n'ai rien compris
Je vais attendre demain matin quand j'aurais retrouvé mon cerveau.

Sinon ça à l'air super ...

[vermine]

J'avoue que la page de test est mal faite (faut prendre le script avec).

Dès le chargement, un exemple est lancé afin que vous voyez à quoi ressemble le formatage des dates que vous ne pourrez pas tester depuis cette page car il faut pouvoir lui passer un objet date et je ne vous ai mis qu'un input de type text.
Dans la première textarea, mon exemple avec les tags, dans la seconde, le résultat formaté. Au milieu, l'input text que vous devez remplir vous même en séparant vos valeurs par des "$". Vous changez aussi la chaine de la première textearea. Petit exemple...

textarea: Bonjour %sx, tu as bien %sl ? Noooon, je n'ai eu que %n2 heures de sommeil!!!

input text: spaffy$DORMI$0101

Petit clic sur le bouton et ça devrait afficher: Bonjour Spaffy, tu as bien dormi ? Noooon, je n'ai eu que 5 heures de sommeil!!!

Mais nous sommes d'accord, il faudrait retravailler la gestion des erreurs et des valeurs entrées mais bon, ce n'est pas toujours évident.

[SpaceFrog]

J'ai retrouvé un bout de cerveau qui trainait au pied du lit ce matin ...

Alors de ce que j'en ai compris ...

l'input text au dessus du bouton Formater (un seul t ) est destiné à recevoir les chaines ou nombres de remplacement.
il faut autant de chaines et nombres que de % figurant dans le textarea du haut.

Je préconiserais donc pour ton exemple Vermine:
* préciser un titre au dessus de l'input text
* un compteur de % dans le textarea
* un compteur split('$') sur le textarea qui pourrait même faire un rappel du format associé au remplacement en cours (dernier de l'input text)

Pour moi ce serait plus explicite ainsi ..

[vermine]

Tu as bien raison, mais la page n'est là qu'à titre d'exemple rapide car pour utiliser le script de manière complète et indépendante, il suffit, d'appeler la fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var chaine = "Petit %s à %d('$hhh$mi').";
var ma_date = new Date();
var tableau_parametres = new Array("test", ma_date);
var chaine_formatee = format_string(chaine, tableau_parametres, "autre");
//le mot "autre" en dur

Ce qui vous permettra de passer un objet Date dans le tableau de paramètres. Et évidemment, le nombre de paramètres doit correspondre au nombre de "%x".

Je corrigerai l'exemple ce soir si j'ai le temps.

[SpaceFrog]

Je te soumets cette petit modif du script qui permet de visualiser le format visé par la chaine de remplacement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
94
95
96
97
98
99
100
101
102
<html>
<head>
<title>Format String Javascript</title>
 
<script type="text/javascript" src="format_string.js"></script>
 
<script type="text/javascript">
function init()
{	
	var chaine = "Bonjour %s, comment %sl-tu ? Le total est de %n voire %n10. Tu peux carrément dire %f.2 ou bien %f,10. Nous sommes le %d('$ddd $dd $mmm $yyyy') et il est %d('$hhh$mi min et $ss,$milli secondes').";
 
	document.getElementById("id_chaine").innerHTML = chaine;
	document.getElementById("id_parametres").value = "Changer la chaine et entrez vos paramètres ici, séparés par $ (ne marche pas avec les dates, vu qu'il faut un objet date...)";
	var ma_date 	= new Date();
	var parametres 	= new Array("Developpeur fou", "vAs", "45", 50, "24,35", 1547.538, ma_date, ma_date);
	var chaine_formatee = format_string(chaine, parametres, "autre");
	document.getElementById("id_chaine_formatee").innerHTML = chaine_formatee;
}
 
function formater_chaine()
{
	var chaine 		= document.getElementById("id_chaine").value;
	var parametres 	= document.getElementById("id_parametres").value;
	var tab_parametres = parametres.split("$");
 
	var chaine_formatee = format_string(chaine, tab_parametres, "autre");
	document.getElementById("id_chaine_formatee").innerHTML = chaine_formatee;
}
 
function explications(le_bouton)
{
    if(le_bouton.value == ">>")
    {
		le_bouton.value = "<<";
		document.getElementById("id_span").style.display = "";
    }
    else
    {
		le_bouton.value = ">>";
		document.getElementById("id_span").style.display = "none";    
    }
}
 
function synch(obj){
var chaine=document.getElementById('id_chaine').value
var tabformat=new Array();
var synchrep=new Array();
var reg=/(%([abce-z0-9.,]+\b))|(%d(\([^)]*\)))/gi;
var matches;
while (matches = reg.exec(chaine)) {
  tabformat.push(matches[0])
}
synchrep=obj.value.split('$').length
document.getElementById('elt_format').value=tabformat[synchrep-1]
 
}
</script>
</head>
 
<body onload="init();" style="background-color:#6e9d47">
<h2>Explications</h2>
<input type="button" value=">>" onclick="explications(this);">
<span id="id_span" style="display:none">
<br>//---------------------------------------------------------------
<br>// Combinaisons possibles:
<br>//---------------------------------------------------------------
<br>//- Chaine de caractères avec casse éventuelle:
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %s : ne rien faire à la chaine
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %sl: mettre en miniscules
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %su: mettre en majuscules
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %sx: première lettre en majuscule, le reste en miniscules
<br>// - Nombre entier avec base éventuelle (sur 2 digit): 
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %d : base par défaut à 10
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %d2, %d10, ...
<br>// - Nombre à x chiffres après la virgule:
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %f.x: utilisation du point (1.25)
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %f,x: utilisation de la virgule (1,25)
<br>// - Formatage de date:
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* %d('format'): accepte un objet Date et un format
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $dd   : numéro du jour
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $ddd  : nom du jour
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $mm   : numéro du mois
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $mmm  : nom du mois
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $yy   : deux derniers chiffres de l'année
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $yyyy : années sur quatre chiffres
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $hh   : heures
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $PM   : heures format AM/PM
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $mi   : minutes
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $ss   : secondes
<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* $milli: millisecondes
<br>//---------------------------------------------------------------
</span>
<h2>Chaine avec les tags</h2>
<textarea id="id_chaine" rows="5" cols="100"></textarea><br><br>
<h2>Chaine de remplacements séparés par $</h2>
Element de format:<input type='text' id='elt_format' value="" readonly="readonly" /><br/>
<input type="text" id="id_parametres" size="130" onkeyup="synch(this)" onfocus="this.value=(this.value=='Changer la chaine et entrez vos paramètres ici, séparés par $ \(ne marche pas avec les dates, vu qu\'il faut un objet date...\)')?'':this.value" /><br><br>
<input type="button" value="Formatter" onclick="formater_chaine();">
<h2>Résultat</h2>
<textarea id="id_chaine_formatee" rows="5" cols="100" readonly></textarea>
</body>
</html>

elle ne fonctionne que si l'on est sur le dernier element de remplacement, il faudrait rajouter la capture de la position du caret dans l'input text ...
Mais trop de code pour pas grande chose de plus, ce n'est qu'une démo ...

[vermine]

Pas mauvaise idée, merci.
Cependant, il faudrait remettre l'expression régulière du script car la tienne indique les caractères collés au tag mais qui ne font pas partie du tag:

%sl-tu bien ?

Me donne:

%sl-tu

[SpaceFrog]

oui je m'en suis rendu compte entre temps ...
c'est modifié...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var reg=/(%([abce-z0-9.,]+\b))|(%d(\([^)]*\)))/gi;