|
5.4 Manipulation de chaines |
  copyleftSee You Why? |
Nous avons détaillé la concaténation de chaines et de variables. Que faut-il en retenir principalement ?
Dans l'introduction du JS, nous avions signalé rapidement que le JS était un langage orienté objet. Pour l'illustrer nous allons aborder ci-dessous,
d'une part,
quelques propriétés des objets strings,
d'autre part,
quelques méthodes applicables à un objet de type string.
En JS, la principale propriété d'un objet de type string est sa longueur (ou length en anglais).
Pour retrouver la propriété d'un objet, on note le nom de cet objet, immédiatement suivi d'un point, lui-même immédiatement suivi du nom de la propriété.
Ainsi, en écrivant :
var ma_variable = "Bonjour "+"tout le monde";
document.write(ma_variable.length);
la variable ma_variable contiendra la chaine "Bonjour tout le monde", et le programme écrira la longueur de cette chaine, soit 21. N'oubliez pas que les espaces sont des caractères de la chaine. Évidemment, JS ne comptera pas les guillemets qui encadrent la variable.
Nous y reviendrons lorsque nous aborderons les objets JavaScript et les formulaires, mais détaillons rapidement ici un mode d'écriture propre au JS, notation qui pourrait effrayer le lecteur non-initié :
ma_variable.length se lit et signifie "longueur de ma_variable" ;
document.form1.input.value se lit et signifie "la valeur du champ input du formulaire form1 du document en cours",
et pour en connaitre la longueur, il suffira d'écrire document.form1.input.value.length.
Exemple
|
Nous pensons que la majorité des méthodes décrites ci-dessous sont à la portée des débutants en JS, sauf celles faisant appel aux "expressions régulières" et précédées de 2 astérisques dans le tableau ci-dessous. Matière désarçonnante pour des débutants, mais drôlement utile pour les programmeurs avertis.
Les méthodes applicables à un objet de type string sont nettement plus nombreuses. On citera les méthodes suivantes :
| anchor() | Retourne le texte en créant une ancre nommée |
| big() | Retourne le texte en police plus grosse |
| blink() | Retourne le texte en mode clignotant |
| bold() | Retourne le texte en gras |
| charAt() | Retourne le caractère à la position spécifiée |
| charCodeAt() | Retourne le code ASCII d'un caractère |
| concat() | Retourne la concaténation de 2 chaînes |
| fixed() | Retourne le texte en police à chasse fixe |
| fontcolor() | Retourne le texte colorié |
| fontsize() | Retourne le texte dimensionné |
| fromCharCode() | Crée une chaîne à partir d'une série de code ASCII |
| indexOf() | Retourne la position d'une sous-chaîne |
| italics() | Retourne le texte en italiques |
| lastIndexOf() | Retourne l'indice de la dernière occurrence de sous-chaîne |
| link() | Retourne le texte en créant un lien |
| ** match() | Vérifie la concordance d'un motif d'expression régulière |
| ** replace() | Remplace un motif d'expression régulière |
| ** search() | Recherche une sous-chaîne conforme à un modèle d'expression régulière |
| slice() | Extrait une sous-chaîne |
| small() | Retourne le texte en police plus petite |
| ** split() | Retourne un tableau de chaînes découpées par un séparateur |
| strike() | Retourne le texte barré |
| sub() | Retourne le texte en indice |
| substr() | Extrait une sous-chaîne d'une chaîne (début - fin) |
| substring() | Extrait une sous-chaîne d'une chaîne (début - longueur) |
| sup() | Retourne le texte en exposant |
| ** test() | Retourne true ou false selon que l'expression régulière ait été trouvée |
| toLowerCase() | Retourne le texte en minuscules |
| toUpperCase() | Retourne la chaîne en majuscules |
La méthode anchor("nom_de_l_ancre") nécessite un argument (ou paramètre) indispensable, à savoir le nom de l'ancre nommée que l'on veut faire apparaitre. Nous renvoyons le lecteur à la notion d'ancre nommée en HTML s'il a oublié ce dont il s'agissait.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<a name="nom_de_l_ancre">xxx</a>
La méthode big() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .big() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir des chaines pourvues de la méthode big() dans une police de caractères de taille plus grande.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<font size="+1">xxx</font>
La méthode blink() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .blink() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour que l'internaute qui visite vos pages voie les chaines pourvues de la méthode blink() dans une police qui clignote... uniquement s'il utilise Netscape comme navigateur.
C'est donc une méthode peu utilisée.
La méthode bold() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .bold() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode bold() dans une police plus grasse.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<b>xxx</b>
Le lecteur trouvera bizarre la lettre A capitale au milieu du nom de la méthode. C'est l'occasion de lui rappeler que les méthodes ont des noms sensibles à la casse... même si les méthodes déjà présentées ici ont un nom en bas de casse (minuscule, incorrect).
La méthode charAt(place_du_caractère_cherche) nécessite un argument (ou paramètre) indispensable, à savoir la place du caractère cherché... sans oublier que dans une chaine de caractères, le premier caractère occupe la place 0 (zéro) et que le dernier se trouve à la place .length-1... pour voir (ou mémoriser) le caractère que l'on veut découvrir.
var = "ceci est un texte complet"; x = var.charAt(3); // x prendra la valeur 'i'
x = var.charAt(0); // x prendra la valeur 'c'
x = var.charAt(45); // x prendra la valeur ''
La méthode charCodeAt() nécessite un argument (ou paramètre) indispensable, à savoir la position du caractère de la chaine. Ainsi l'argument 3 renverra la code ASCII du 4e caractère de la chaine (et oui, le pas oublier que les ordis commencent à compter à partir de zéro).
On pourrait écrire:
<SCRIPT language=javascript>
var chaine="ABCDEF CUY";
for (var i=0; i<chaine.length; i++) {
document.write(i+" Code ASCII de "+chaine.charAt(i)+"="+chaine.charCodeAt(i)+"<BR>");
}
</SCRIPT>
Et obtenir:
0 Code ASCII de A=65
1 Code ASCII de B=66
2 Code ASCII de C=67
3 Code ASCII de D=68
4 Code ASCII de E=69
5 Code ASCII de F=70
6 Code ASCII de l'espace=32
7 Code ASCII de C=67
8 Code ASCII de U=85
9 Code ASCII de Y=89
Mais pour cela, il faudra comprendre la boucle FOR, vue au chap. 19.
La méthode concat() nécessite un ou plusieurs arguments (ou paramètres) indispensable(s), à savoir les variables-chaines à concaténer et à ajouter à la variable qui précède. Elle servira à concaténer plusieurs variables (ou arrays, ou tableaux, ou objets).
On écrira pour des arrays ou tableaux:
<SCRIPT language=javascript>
var locaux=new Array("Pommes", "Poires", "Cerises", "Fraises", "Prunes");
var importes=new Array("Bananes", "Ananas", "Kiwis", "Mangues);
var fruits=locaux.concat(importes)
document.write(fruits.join(", "));
</SCRIPT>
On écrira pour des chaines ou strings:
<SCRIPT language=javascript>
var chaine="Première partie";
var chaine2=" seconde partie";
document.write(chaine.concat(chaine2));
</SCRIPT>
ou encore:
<SCRIPT language=javascript>
var chaine="Première partie";
var chaine2=" seconde partie";
var chaine3=" troisième partie";
var chaine4=" quatrième partie";
document.write(chaine.concat(chaine2,chaine3,chaine4));
</SCRIPT>
On estime que l'intérêt de cette méthode est très limité car il est bien plus simple d'utiliser le symbole + pour obtenir le même résultat chaine1+chaine2.
La méthode fixed() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .fixed() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode fixed() dans une police à chasse fixe, c'est-à-dire où tous les caractères ont la même largeur (mesure horizontale).
<script>
var str = "Salut la compagnie !";
document.write(str.fixed());
</script>
L'équivalent HTML pur de cette méthode est l'usage de la balise
<code>xxx</code>, utilisé ici pour les exemples de code.
La méthode fontcolor() nécessite un argument (ou paramètre) qui constitue une chaine fixant la couleur (de type "yellow", "red" ou "#aacc33", il suffit d'ajouter .fontcolor() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir des chaines pourvues de la méthode fontcolor() dans une police de couleur fixée par le paramètre.
Pour le lecteur qui souhaite s'informer plus à propos des couleurs RGB définies en hexadécimal, nous renvoyons le lecteur à notre page où nous développions le sujet dans notre tutoriel HTML.
<script>
var str = "Salut la compagnie !";
document.write(str.fontcolor(red));
</script>
L'équivalent HTML pur de cette méthode est l'usage de la balise
<font color="#33BB22">xxx</font>
La méthode fontsize() nécessite un argument (ou paramètre) indispensable, à savoir la taille souhaitée. Cet argument peut être une valeur numérique de 1 à 7, les même valeurs précédées du signe '+' ou encore les mêmes valeurs précédées du signe '-'. Voici illustré le résultat selon le choix de cette valeur: 1, 2, 3, 4, 5, 6, 7. Attention, le résultat peut être différent selon le navigateur utilisé et selon le choix d'affichage de l'internaute.
Si vous choisissez l'argument '+2', vous choisissez une taille augmentée de 2 par rapport à la taille affichée sur l'écran de l'internaute visiteur de vos pages. Vous aurez deviné ce qui se passera si vous choisissez un argument '-1'...
<script>
var str = "Salut la compagnie !";
document.write(str.fontsize(+2));
</script>
L'équivalent HTML pur de cette méthode est l'usage de la balise
<font sire="+1">xxx</a>
La méthode fromCharCode() nécessite un ou plusieurs argument(s) (ou paramètre(s)) indispensable(s), à savoir les valeurs numériques des caractères ASCII de la chaine que l'on veut écrire.
La méthode fromCharCode() retourne une chaine alphanumérique formée de la conversion de chaque valeur ASCII en une chaine unique, formée des caractères ASCII dont les valeurs ont été transmises en paramètres:
Écrire:
var n=String.fromCharCode(72,69,76,76,79,32,67,85,89);
renverrait la chaine:
HELLO CUY
Retourne la position d'une sous-chaîne (lettre ou groupe de lettres - premier paramètre) dans une chaîne de caractères, en effectuant la recherche de gauche à droite, à partir de la position spécifiée en paramètre facultatif.
La méthode indexOf() nécessite deux arguments (ou paramètres) dont le premier (la sous-chaine à trouver) est indispensable et le deuxième (la position à partir de laquelle il faut rechercher) est facultatif. À défaut de 2e argument, JS fera sa recherche à partir de la position 0, soit dès le début.
N'oubliez pas que Javascript positionne à partir de 0 (et pas 1).
La position donnée est toujours celle occupée dans la chaîne de départ, quelle que soit la position à partir de laquelle la recherche doit se faire. Si la recherche est infructueuse, la réponse donnée sera -1.
var = "ceci est un texte complet"; ssvar = "texte";
x = var.indexOf(ssvar,3); // x prendra la valeur 12
x = var.indexOf(ssvar); // x prendra la valeur 12
x = var.indexOf(ssvar,15); // x prendra la valeur -1
x = var.indexOf("un",3); // x prendra la valeur 9
x = var.indexOf("e",3); // x prendra la valeur 5, le premier 'e' est négligé...
La méthode italics() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .italics() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode italics() dans la même police mais en italiques.
<script>
var str = "Salut la compagnie !";
document.write(str.italics());
</script>
L'équivalent HTML pur de cette méthode est l'usage de la balise
<i>xxx</i>
La méthode lastIndexOf() est la même que la méthode indexOf()... sauf que l'on commence par la droite. Cependant, la position est bien calculée à partir de la gauche...
var = "ceci est un texte complet";
ssvar = "texte";
x = var.lastIndexOf(ssvar,3); // x prendra la valeur 12, car 'texte' est trouvé avant le 'p'
x = var.lastIndexOf(ssvar); // x prendra la valeur 12
x = var.lastIndexOf(ssvar,15); // x prendra la valeur -1, car 'texte' pas trouvé avant le 'u'
x = var.lastIndexOf("un",3); // x prendra la valeur 9 et trouvé avant le 'p'
x = var.lastIndexOf("e",3); // x prendra la valeur 16, le dernier 'e' est négligé et l'avant-dernier est...
La méthode link("nom_de_l_ancre") nécessite un argument (ou paramètre) indispensable, à savoir le nom de l'ancre que l'on veut faire apparaitre. Nous renvoyons le lecteur à la notion d'hyperlien en HTML s'il a oublié ce dont il s'agissait.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<a href="adresse.html">xxx</a>
ou
<a href="#ancre_nommee">xxx</a>
Avant d'étudier cette fonction match(), il faudrait prendre connaissance des "expressions régulières". La méthode match() extrait des sous-chaines (sous forme de tableau) qui correspondent à l'expression régulière :
La méthode match() nécessite un argument (ou paramètre) indispensable, à savoir l'expression régulière recherchée.
Cette méthode pourrait par exemple détecter la présence d'un mot dans un texte :
var mot = "serez";
var texte = "Voici un texte quelconque dans lequel on va essayer de rechercher un mot. Vous aimeriez savoir comment ça marche ? Continuez la lecture de cet exemple, vous serez étonné de découvrir que ça peut valoir le coup ;-)";
var expregul = new RegExp(mot,"g");
if ( texte.match(expregul) ) {
alert(" Y O U P P I E !\n\nLe mot [ "+mot+" ] a été trouvé dans ce texte :-)");
} else {
alert(" S N I F F !\n\nLe mot [ "+mot+" ] ne semble pas être présent dans ce texte :-( ");
}
Qui affichera :
Y O U P P I E !
Le mot [ serez ] a été trouvé dans ce texte :-)
L'expression régulière match possède une syntaxe proche de celle de la méthode 'test()'. Attention, on expliquera mieux dans la méthode 'test'.
Plus de détails dans la séquence traitant des méthodes applicables aux expressions régulières.
Comme pour la méthode match(), avant d'étudier cette fonction replace(), il faudrait prendre connaissance des "expressions régulières". La méthode replace() remplace par la chaine spécifiée en paramètre, toute correspondance entre une chaine et l'expression régulière qui lui est appliquée :
La méthode replace() nécessite deux arguments (ou paramètres) indispensables, à savoir l'expression régulière de la chaine à remplacer et la chaine de remplacement, par laquelle il faut remplacer : chaine.replace(regExp, chaineDeRemplacement ) .
Plus de détails dans la séquence traitant des méthodes applicables aux expressions régulières.
Comme pour les méthode match() et replace(), avant d'étudier cette fonction search(), il faudrait prendre connaissance des "expressions régulières".
La méthode search() retrouve les sous-chaines conformes à un paramètre spécifié par l'expression régulière.a chaine spécifiée en paramètre, toute correspondance entre une chaine et l'expression régulière qui lui est appliquée :
La méthode search() ne nécessite qu'un argument (ou paramètre) indispensable, à savoir l'expression régulière de la chaine à retrouver : on pourrait l'utiliser pour retrouver les adresses mail, les mots immédiatement suivis d'une virgule, les numéros de banque dans un texte.
Même si cette fonction est proche de indexOf() où la valeur retournée correspond au nombre de caractères très précisément identiques à celui donné en paramètre, la fonction search() prend en argument une expression régulière permettant de retrouver des 'modèles'. Un exemple :
var s="programmation en javascript";
var expr = new RegExp("([a-zA-Z])\1");
var n = s.search(expr);
alert("n=" + n);
qui affichera dans une fenêtre popup :
n=6
L'expression régulière ci-dessus devrait se lire :
[a-zA-Z] une lettre bas de casse ou capitale... (imprécis : minuscule ou majuscule [voir])
([a-zA-Z]) cette lettre mise en mémoire pour être réutilisée
\1 réutilise la lettre retenue en mémoire.
L'expression régulière signifie donc : "cherche une lettre doublée".
La réponse est 6 car le 'm' situé en 7e place est répété.
Plus de détails dans la séquence traitant des méthodes applicables aux expressions régulières.
Cette méthode sert à extraire une sous-chaîne de caractères à partir d'une chaîne de caractères en précisant par deux arguments, le premier représentant la place du début de la sous-chaîne et le deuxième (facultatif), la place du dernier caractère qui termine la sous-chaîne.
mavar = "ceci est un texte complet"; x = mavar.slice(2,12); // x prendra la valeur "ci est un t"
La méthode small() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .small() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode small() dans une police de taille inférieure.
<script>
var str = "Salut la compagnie !";
document.write(str.small());
</script>
L'équivalent HTML pur de cette méthode est l'usage de la balise
<small>xxx</small>
ou
<font size="-1">xxx</font>
Comme pour les méthodes match(), replace() et search(), avant d'étudier cette fonction split(), il faudrait prendre connaissance des "expressions régulières".
La méthode split() extrait des sous-chaines (sous forme de tableau [sera vu au chapitre 26]) qui sont séparées par les séparateurs définis dans l'expression régulière :
La méthode split() nécessite un argument (ou paramètre) indispensable, à savoir l'expression régulière des séparateurs.
Cette méthode pourrait par exemple décomposer une date en jour, mois et année :
var la_date = "25/09/2011";
var expr = new RegExp("\/","g");
var date2 = la_date.split(expr);
document.write('25/09/2011 :<br>jour = '
+ date2[0] + '<br>mois = ' + date2[1]
+ '<br>annee = ' + date2[2] + '<br>');
Qui affichera :
25/09/2011 : jour = 25 mois = 09 annee = 2011
L'expression régulière ci-dessus devrait se lire :
\/ le caractère spécial slash / (donc précédé du backslash)...
l'option "g" effectue un recherche globale sur toute la chaine de caractères.
Si aucune sous-chaine n'avait été trouvée, la variable date2 aurait une valeur "null".
Plus de détails dans la séquence traitant des méthodes applicables aux expressions régulières.
La méthode strike() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .strike() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode strike() dans une police barrée.
<script>
var str = "Salut la compagnie !";
document.write(str.strike());
</script>
qui écrira "Salut la compagnie !".
L'équivalent HTML pur de cette méthode est l'usage de la balise
<s>xxx</s>
La méthode sub() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .sub() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode sub() dans une police en indice.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<sub>xxx</sub>
La méthode substr() extrait une sous-chaine d'une chaine donnée, à partir d'un point de départ et d'une longueur donnée. Elle nécessite donc deux arguments (ou paramètres) indispensables, à savoir le départ (attention, la 1re lettre a l'indice 0, la 2e l'indice 1, etc.) et le nombre de caractères à extraire. Un exemple :
var s="programmation en javascript";
var n = s.substr(3,4);
alert("n=" + n);
qui affichera dans une fenêtre popup :
n="gram"
Très proche de substr(), la méthode substring() extrait aussi une sous-chaine d'une chaine donnée, à partir d'un point de départ mais jusqu'à une fin donnée. Elle nécessite donc deux arguments (ou paramètres) dont un premier indispensable et un second facultatif, à savoir la position de départ indispensable (attention, la 1re lettre a l'indice 0, la 2e l'indice 1, etc.) et la position du dernier caractère à extraire (si ce second argument est omis, la sous-chaine extraite ira jusqu'à la fin de la chaine donnée. Un exemple :
var s="programmation en javascript";
var n = s.substring(3,8);
alert("n=" + n);
qui affichera dans une fenêtre popup :
n="gramm"
Le lecteur aura constater que le neuvième caractère 'a' (d'indice 8) n'est pas repris dans la sous-chaine. Il s'agit bien d'un début inclus et d'une fin exclue. Le nombre de caractères affichés sera bien la différence entre début et fin.
La méthode test() nécessite un argument (ou paramètre) qui sera la chaine de caractères à tester. La méthode exp_regul.sup(chaine) permet de tester si l'expression désignée par l'expression régulière est bien présente dans la chaine à tester. La méthode test() renvoie une valeur booléenne true, si le test est fructueux et false dans le cas contraire.
Un exemple:
var express_reg = /cuy/gi;
var texte = "Le cuy est aussi le nom donné au Pérou au cochon d'Inde";
alert(express_reg.test(texte));
va afficher true, car 'cuy' a été retrouvé dans le texte.
La méthode sup() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .sup() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode sup() dans une police en exposant.
L'équivalent HTML pur de cette méthode est l'usage de la balise
<sup>xxx</sup>
La méthode toLowerCase() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .toLowerCase() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode toLowerCase() dans une police en bas de casse (incorrectement appelée minuscule - voir ici).
<script>
var str = "Salut la COMPAGNIE !";
document.write(str.toLowerCase());
</script>
La méthode toUpperCase() ne nécessite aucun argument (ou paramètre), il suffit d'ajouter .toUpperCase() soit derrière le nom d'une variable chaine, soit derrière une chaine de caractères notée entre ses guillemets pour obtenir les chaines pourvues de la méthode toUpperCase() dans une police en capitale (incorrectement appelée majuscule - voir ici).
<script>
var str = "Salut La Compagnie !";
document.write(str.toUpperCase());
</script>
Le lecteur attentif aura noté que l’ordre des éléments dans l’utilisation de la fonction match diffère de la fonction exec.
Dans la fonction exec(), on écrira expressionReguliere.exec(chaineAtraiter) tandis que dans la fonction match on écrira chaineAtraiter.match(expressionReguliere).
L’ordre est inversé. Cela fait partie des incohérences du langage javascript …
De même
message2 += " suite du message ";
signifie aussi
message2 = message2 + " suite du message ";
On lira :
x prend comme nouvelle valeur l'ancienne valeur de x augmentée de y
ou
message2 prend comme nouvelle valeur l'ancienne valeur de message2 concaténée à " suite du message ".
voir suite >>>
voir suite >>>
voir suite >>>
voir suite >>>
voir suite >>>