|
5.5 Expressions régulières |
  copyleftSee You Why? |
De quoi s'agit-il encore ? Les expressions régulières permettent d'effectuer des recherches complexes dans des chaînes de caractères.
Ces expressions sont elles-mêmes des chaînes balisées par des caractères particuliers selon une syntaxe concise. Cette syntaxe n'est pas propre au JavaScript ; on en trouve des variantes, notamment dans les jokers de recherche de fichiers DOS et Windows et dans des commandes Unix et le langage Perl s'en inspire beaucoup.
Cette séquence et la suivante nous semble assez ardue pour un début de formation. Nous n'avons cependant pas voulu ignorer ce sujet difficile puisque nous parlions de variables chaines de caractères et de leur manipulation.
Le lecteur est donc averti, il pourrait:
* ne pas lire ces deux séquences maintenant et ne pas souffrir de la compréhension de la suite;
* éventuellement prendre connaissance rapidement du contenu qui suit sans s'inquiéter d'une difficulté de compréhension;
* dans tous les cas, revenir au sujet traité dans le but de mieux le comprendre...
Les "expressions régulières" ne sont pas indispensables à l'écriture de script en JS... mais c'est tellement mieux quand on maitrise le sujet.
Une expression régulière est un objet JS... nous approfondirons la notion d'objet au chapitre 23 et suivants.
Un objet "expression régulière" peut être introduit et éventuellement défini grâce au constructeur de la classe, RegExp(), en écrivant simplement une instruction du type
var R = new RegExp().
Dans cet exemple, l'expression régulière R existe, mais aucune valeur ne lui a été affectée. Comme pour les constructeurs que nous avons déjà rencontrés, on aurait pu définir sa valeur en la précisant, sous forme d'une chaîne de caractères, en paramètre du constructeur.
Un tel objet peut aussi être introduit de façon littérale en utilisant des marqueurs spécifiques délimitant l'expression : '/', appelés 'slash'. Nous pourrions ainsi avoir :
var nomExpression = /chaine/[cles];
(avec les paramètres
chaine (obligatoire) qui constitue le corps de l'expression régulière et
cles (facultatif) qui ne sera qu'un modifieur de recherche pouvant prendre les valeurs "g", "i", "gi" ou "m".
Une écriture équivalente utilisant le constructeur eut été :
var nomExpression = new RegExp(chaine [,cles]);
et c'est cette écriture que nous privilégierons dans la suite de ces notes.
Le vocabulaire ci-dessus est propre aux méthodes applicables aux objets, nous en reparlerons au chapitre 25.
Nous dirons à ce moment-là que les méthodes peuvent être considérées comme des fonctions qui ne s'appliqueront qu'à certains objets... la notion de fonction sera abordée aux chapitres 6 et suivants.
Nous reparlerons de la notion de constructeur lorsque nous développerons la notion d'objet, à partir du chapitre 23.
La notion de paramètre sera abordée lorsque nous traiterons des fonctions à un ou plusieurs paramètres aux chapitres 7 et 8.
Selon la valeur que prendra le paramètre cles, les options suivantes modifieront la recherche :
| (aucun) | pour rechercher le motif en tenant compte de la casse (capitale ou bas de casse, improprement [majuscule / minuscule]) et en s'arrêtant à la première occurence |
| "i" | pour rechercher le motif en ignorant, sans tenir compte de la casse (capitale ou bas de casse, improprement [majuscule / minuscule]) |
| "g" | pour rechercher le motif de façon globale (toutes les occurences sur toute la chaine sur laquelle s'applique la fonction) |
| "gi" | pour rechercher le motif globalement et ignorant la casse |
| "m" | pour rechercher le motif sur plusieurs lignes, donc multiligne |
Dans une expression régulière, outre les caractères devant se retrouver physiquement dans la ou les chaînes qui seront traitées par celle-ci, on rencontre un nombre non négligeable de caractères 'outils' dont il est important de bien saisir la sémantique pour pouvoir les utiliser de façon pertinente et réaliser ainsi des modèles efficaces et concis.
Ces caractères sont de différents types :
* les caractères définissant des littéraux ;
* les caractères d'ensemble ;
* les caractères de groupement ;
* les caractères de répétition.
Nous préférons faire la présentation d'une manière plus simple et plus didactique, même si elle est moins synthétique. Nous aborderons :
En JS, l'expression régulière la plus simple est celle qui recherche un seul caractère. Ainsi, pour rechercher le caractère 'a' ... dans l'expression régulière, on notera "a" entre guillemets.
Ainsi, en écrivant :
var ma_variable = "Premiers pas de programmation en JavaScript"; var expr = new RegExp("a"); var expr2 = new RegExp("a","g"); var rep1 = ma_variable.replace(expr," "); alert(rep1); // affichera 'Premiers p s de programmation en JavaScript' car 'a' est trouvé et remplacé en 10e place var rep2 = ma_variable.replace(expr2," "); document.write(rep2); // affichera 'Premiers p s de progr mm tion en J v Script' car tous les 'a' sont trouvés et remplacés
Exemple
|
À peine plus difficile, en JS, l'expression régulière qui recherche non plus un seul caractère, mais une chaine de caractères. Ainsi, pour rechercher la chaine de caractères 'pr' ... dans l'expression régulière, on notera "pr" entre guillemets.
Ainsi, en écrivant :
var ma_variable = "Premiers pas de programmation en JavaScript"; var expr = new RegExp("pr"); var expr2 = new RegExp("pr","gi"); var rep1 = ma_variable.replace(expr,"xx"); alert(rep1); // affichera 'Premiers pas de xxogrammation en JavaScript' car 'pr' en bas de casse est trouvé et remplacé en 16e place var rep2 = ma_variable.replace(expr2,"xx"); document.write(rep2); // affichera 'xxemiers pas de xxogrammation en JavaScript' car tous les 'pr', sans tenir compte de la casse sont trouvés et remplacés
Exemple
|
Un pas de plus, en JS, une expression régulière qui recherche non plus une chaine de caractères mais un choix de chaines de caractères. Ainsi, pour rechercher l'une des chaines de caractères 'pr' ou 'at'... dans l'expression régulière, on notera "pr|at" entre guillemets.
Mais quel est ce caractère bizarre '|' ? C'est un caractère, souvent dénommé 'pipe' (prononcé à l'anglaise 'païpe' qui s'obtient en appuyant simultanément sur la touche 'AltGr' et le '&' [même touche que le 1 sur les claviers belges]
Ainsi, en écrivant :
var ma_variable = "Premiers pas de programmation en JavaScript"; var expr = new RegExp("pr|at"); var expr2 = new RegExp("pr|at","gi"); var rep1 = ma_variable.replace(expr,"xx"); alert(rep1); // affichera 'Premiers pas de xxogrammation en JavaScript' car le premier 'pr' en bas de casse est trouvé et remplacé en 16e place var rep2 = ma_variable.replace(expr2,"xx"); document.write(rep2); // affichera 'xxemiers pas de xxogrammxxion en JavaScript' car tous les 'pr' ou 'at', sans tenir compte de la casse sont trouvés et remplacés
Exemple
|
Encore un pas de plus, en JS... on parlera bientôt chinois ou arabe... une expression régulière qui recherche non plus un choix de chaines de caractères, mais des portions de chaines au choix. Ainsi, pour rechercher l'une des chaines de caractères 'stop', 'pop' ou 'hop'... après avoir observé qu'elles se terminent toutes par 'op' mais commencent soit par 'st', 'p' ou 'h', dans l'expression régulière, on pourrait noter"stop|pop|hop" entre guillemets, mais on va préférer la notation du choix entre parenthèses (pour une partie de l'expression), suivi de la partie fixe de la chaine, le tout entre parenthèses.
Ainsi, en écrivant :
var ma_variable = "Halte ! Stop ! Quelle est cette populace qui fait tant de shopping ?"; var expr = new RegExp("(st|p|h)op"); var expr2 = new RegExp("(st|p|h)op","gi"); var rep1 = ma_variable.replace(expr,"22"); alert(rep1); // affichera 'Halte ! Stop ! Quelle est cette 22ulace qui fait tant de shopping ?' car le premier 'pop' en bas de casse est trouvé et remplacé var rep2 = ma_variable.replace(expr2,"3"); document.write(rep2); // affichera 'Halte ! 3 ! Quelle est cette 3ulace qui fait tant de s3ping ?' car tous les 'pop', 'stop' ou 'hop', sans tenir compte de la casse sont trouvés et remplacés
Exemple
|
On n'est pas encore au bord du précipice, faisons donc un pas de plus, en JS... une expression régulière qui recherche non plus un choix de chaines de caractères, mais des portions de chaines au choix. Ainsi, pour rechercher l'une des chaines de caractères 'eae', 'ebe' ou 'ece'... après avoir observé qu'elles se composent de deux 'e' séparés par un caractère quelconque, dans l'expression régulière, on pourrait noter"e.e" entre guillemets, Le 'point' fait office de joker et peut remplacer n'importe quel caractère, y compris virgule, point d'interrogation et autres (mais pas un 'retour à la ligne').
Attention, il ne remplace qu'un seul caractère... pour les vieux routiers du DOS, c'est l'équivalent du '?' et non pas de l' '*'.
'..' signifierait deux caractères quelconques.
Ainsi, en écrivant :
var ma_variable = "Halte ! Stop ! Quelle est cette populace qui fait tant de shopping ?"; var expr = new RegExp("e..e"); var expr2 = new RegExp("e..e","gi"); var rep1 = ma_variable.replace(expr,"4"); alert(rep1); // affichera 'Halte ! Stop ! Qu4 est cette populace qui fait tant de shopping ?' car le premier 'elle' en bas de casse est trouvé et remplacé var rep2 = ma_variable.replace(expr2,"4"); document.write(rep2); // affichera 'Halte ! Stop ! Qu4 est c4 populace qui fait tant de shopping ?' car tous les 'elle', 'ette' sans tenir compte de la casse sont trouvés et remplacés
Exemple
|
Toujours plus, en JS... une expression régulière qui recherche non plus des choix de chaines de caractères, mais un début ou une fin de chaine. Ainsi, pour rechercher si une chaine de caractères commence bien par 'ha', dans l'expression régulière, on notera simplement "^ha" entre guillemets ; pour rechercher si une chaine de caractères se termine bien par '?', dans l'expression régulière, on notera simplement "?$" entre guillemets.
Le 'caret' ou '^', placé devant une chaine indique que la chaine doit commencer par la chaine qui suit ce caret (obtenu avec 'AltGr' sur la touche du 6) ;
le 'dollar' ou '$' qui suit une chaine indique que la chaine doit se terminer par cette chaine ;
le lecteur attentif aura remarqué que la clé "gi" ci-dessous n'a pas de sens, puisqu'il ne peut s'agir d'une recherche sur toute la chaine, mais uniquement sur la fin de la chaine ; la clé "i" seule suffisait et s'avèrerait nécessaire ici pour modifier le 'Ha' initial.
Ainsi, en écrivant :
var ma_variable = "Halte ! Stop ! Quelle est cette populace qui fait tant de shopping ?"; var expr = new RegExp("^ha"); var expr2 = new RegExp("?$","gi"); var rep1 = ma_variable.replace(expr,"4"); alert(rep1); // affichera 'Halte ! Stop ! Quelle est cette populace qui fait tant de shopping ?' car le premier 'Ha' n'est pas en bas de casse var rep2 = ma_variable.replace(expr2,"555"); document.write(rep2); // affichera 'Halte ! Stop ! Quelle est cette populace qui fait tant de shopping 555' car tous le '?' final, sans tenir compte de la casse est trouvé et remplacé
Exemple
|
Encore une, en JS... une expression régulière qui recherche non plus un joker dans une chaine de caractères, mais un "joker limité" dans une chaine. Ainsi, pour rechercher si une chaine de caractères contient bien l'une des chaines 'tac', 'toc', 'tuc', 'tic', mais pas 'ttc', ni ''tec" dans l'expression régulière, on notera simplement "t[aoui]c" entre guillemets ; et, à l'intérieur de la chaine recherchée, on notera entre crochets "[]" les différentes valeurs uniques acceptées en cette place.
À l'intérieur d'une classe, on peut encore (toujours entre les crochets) placer un '-' ou 'trait d'union' qui indiquera qu'il s'agit de plage de valeurs acceptées (de celle qui précède à celle qui suit le trait d'union. Ainsi :
[r-x] est équivalent à [rstuvwx]
[5-9] est équivalent à [56789]
[r-x5-9] est aussi équivalent à [rstuvwx56789]
le modèle des nouvelles plaques françaises acceptables se noterait :
"[a-z][a-z]-[0-9][0-9][0-9]-[a-z][a-z]"
et l'avenir nous montrera que l'on peut simplifier cette écriture
À l'intérieur d'un classe on peut aussi (toujours entre les crochets) placer un 'caret' ou '^' au début de la classe, ce qui indiquerait la négation de la classe ou le rejet des caractères de la classe. Ainsi :
"[^a-z]" indiquerait que le mot ne peut pas contenir de lettres en bas de casse (vulgairement dénommées minuscules [voir ici]).
Attention, à l'extérieur d'un classe on peut aussi (toujours entre les crochets) placer un 'dollar' ou '$' derrière la classe, ce qui indiquerait que la chaine devrait se terminer par un des caractères de la classe. Ainsi :
"[a-z]$" indiquerait que le mot ne peut pas se terminer que par des lettres en bas de casse (vulgairement dénommées minuscules [voir ici]), mais ni par des signes de ponctuation, ni espaces, ni chiffres, ni capitales (vulgairement dénommées majuscules [voir ici]).
Attention aussi, car à l'extérieur d'un classe on peut aussi (toujours entre les crochets) placer un 'caret' ou '^' devant la classe, ce qui indiquerait que la chaine devrait commencer par l'un des caractères de la classe. Ne pas confondre avec celui placé à l'intérieur de la classe qui nie ce qui suit. Ainsi :
"^[a-z]" indiquerait que le mot doit commencer par une lettre en bas de casse (vulgairement dénommée minuscule [voir ici]).
Ainsi aussi, pour vérifier qu'une phrase ne se termine pas sans ponctuation finale, on pourrait vérifier :
"[^a-z]$" qui empêcherait la chaine de se terminer par une lettre en bas de casse, mais admettrait les capitales et les chiffres, sans ponctuation, en fin de phrase...
Le 'crochet ouvrant' ou '[', est obtenu avec 'AltGr' et la touche à droite du 'P' sur clavier belge ;
le 'crochet fermant' ou ']', est obtenu avec 'AltGr' et la touche '$', plus à droite du 'P' sur clavier belge.
Ainsi, en écrivant :
var ma_variable = "Halte ! Stop ! Quelle est cette populace qui fait tant de shopping ?"; var expr = new RegExp("[ei]t","gi"); var rep1 = ma_variable.replace(expr,"888"); alert(rep1); // affichera 'Halte ! Stop ! Quelle est c888te populace qui fa888 tant de shopping ?' // car recherche globale
// mais 'Halte', 'Stop', 'est' et ' tant' n'ont pas 't' précédé d'un 'e' ou d'un 'i'
Exemple
|
Et une nouvelle, en JS... une expression régulière qui recherche non seulement les caractères dans une chaine de caractères, mais en plus qui peut préciser le nombre de fois que peut apparaitre chaque caractère dans la chaine. Ainsi, pour rechercher si une chaine de caractères correspondait bien aux anciennes plaques françaises (3 ou 4 chiffres suivis de 2 ou 3 lettres, le tout suivi de deux chiffres).
"+" derrière un caractère ou une classe (<==> {1,}),
signifie que ce qui précède soit présent "au moins une fois" ;
"*" derrière un caractère ou une classe (<==> {0,}),
signifie que ce qui précède soit présent "zéro ou plusieurs fois" ;
"?" derrière un caractère ou une classe (<==> {0,1}),
signifie que ce qui précède soit présent "au plus une fois", c-à-d "zéro ou une fois" ;
"{}" derrière un caractère ou une classe,
signifie que ce qui précède soit présent dans des limites d'occurences précisées ;
"{3}" derrière un caractère ou une classe,
signifie que ce qui précède soit présent exactement 3 fois ;
"{3,}" derrière un caractère ou une classe,
signifie que ce qui précède soit présent 3 fois ou plus ;
"{,3}" n'est pas admis en JavaScript (alors que "{0,3}" l'est),
mais l'est en Java et signifie en Java 3 fois ou moins ;
"{2,4}" derrière un caractère ou une classe,
signifie que ce qui précède soit présent 2 à 4 fois.
Aïe ! Gros problème en JS... une expression régulière qui recherche des caractères dans une chaine de caractères, mais si elle doit trouver des caractères qui ont leur signification propre, comme les '+', '|', '?', '^', ' " ', '.' et autres.
Chez JS, pas de problèmes... tout est prévu.
Le "\" ou "backslask" ou "barre oblique inversée" est un caractère d'échappement qui permet de considérer le caractère qui suit comme un vrai caractère et pas dans l'usage différent que l'usage des expressions régulières lui a attribué. Ce "\" ne peut cependant pas être utilisé entre les crochets indiquant une classe.
Rechercher la présence d'un point dans une adresse mail...
en utilisant ".", JS cherche n'importe quel caractère...
en utilisant "\.", JS cherchera un point dans la chaine.
Voici donc une liste des caractères d'échappement les plus courants :
|
caractère non échappé
|
caractère échappé
|
|
\
|
\\
|
|
.
|
\.
|
|
$
|
\$
|
|
{
|
\{
|
|
}
|
\}
|
|
(
|
\(
|
|
)
|
\)
|
|
[
|
\[
|
|
]
|
\]
|
|
^
|
\^
|
|
?
|
\?
|
|
*
|
\*
|
|
+
|
\+
|
|
-
|
\-
|
Plus de problèmes en JS... une expression régulière peut tout trouver...
... sauf des caractères spécifiques qui signifie 'tabulation' ou 'saut de ligne' ou autres.
Chez JS, pas de problèmes... il existe tout une série de caractères spéciaux ou spécifiques qui ont un sens particulier. Tous ces caractères commencent par l'antislash '\' qui ne doit pas être pris dans le sens de l'échappement, comme dans la série ci-avant. En voici une liste :
|
Le caractère spécial
|
et son utilité |
|
\b
|
pour de capturer une frontière de mot (border), c'est-à-dire des caractères situés au tout début ou à la fin d'un mot. Par exemple "he\b" permet de capturer "vache" ou "hexagone", mais pas "chenil" ni "vaches". De la même façon "\bco" permet de capturer "bon de commande" mais pas "pas encore". |
|
\B
|
pour capturer les caractères non frontière de mot (non border), non précédés ou suivis d'une coupure de mot, c'est-à-dire des caractères situés au milieu d'un mot. Par exemple "ment\B" permet de capturer "commentaire" mais pas "comment va ta voisine". |
|
\cCaractère
|
pour capturer un caractère de contrôle (correspondant à la combinaison Ctrl+Caractère). Par exemple "\cC" permet de capturer la séquence Ctrl+c. |
|
\d
|
pour capturer un caractère numérique. (digit) \d est ainsi équivalent à [0-9]. |
|
\D
|
pour capturer tout caractère non numérique. (non digit) Équivalent à [^0-9]. |
|
\f
|
pour capturer un saut de page. (pagefeed) |
|
\n
|
pour capturer un saut de ligne. (new line) |
|
\r
|
pour capturer un retour de chariot. (carriage return) |
|
\s
|
pour capturer un 'séparateur blanc' (separator), c-à-d une espace, un retour à la ligne, un retour de chariot, un saut de page ou une tabulation. |
|
\S
|
pour capturer un 'non blanc' (non separator), c-à-d ni une espace, un retour à la ligne, un retour de chariot, un saut de page ni une tabulation. |
|
\t
|
pour capturer une tabulation horizontale. (tab) |
|
\v
|
pour capturer une tabulation verticale. (vertical tab) |
|
\w
|
pour capturer un caractère alphanumérique y compris l'underscore _, mais pas le trait d'union. (JS word) Équivalent à [_A-Za-z0-9]. |
|
\W
|
pour capturer un caractère non alphanumérique y compris sans underscore _. (non JS word) Équivalent à [^_A-Za-z0-9]. |
|
\oNombre
|
pour capturer un nombre en base octale (base 8, chiffres de 0 à 7) |
|
\xNombreAF
|
pour capturer un nombre en base hexadécimale sur 2 chiffres (base 16, chiffres de 0 à F) |
|
\uNombreA16C
|
pour capturer un nombre en base hexadécimale sur 4 chiffres (base 16, chiffres de 0 à F) |
"-?[0-9]+"
va accepter tous les entiers positifs ou négatifs
(éventuel -, suivi d'un ou plusieurs chiffres)
"[\d+\.\d+"
va accepter tous les décimaux positifs
(au moins un chiffre avant le point décimal, et au moins un après)
"([\w-\.]*@[\w\.]+\.{1}[\w]+)"
devrait valider une adresse mail
() chaine contenant alphanumérique, trait d'union ou point
() répétés zéro ou plusieurs fois,
() suivi de l'arobase,
() suivie d'une chaine contenant alphanumérique ou point
() répétés une ou plusieurs fois,
() suivi d'un seul point
() suivi par un ou plusieurs alphanumériques
Ce procédé accepterait cependant les adresses n'ayant rien devant l'arobase, ayant des chiffres comme extension finale du serveur ou ayant des extensions de plus de 4 caractères :o(
"^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi"
devrait aussi valider une adresse mail
() commence par un alphanumérique
() suivi d'une chaine contenant alphanumérique répété, point ou trait d'union,
() répétée zéro ou plusieurs fois,
() suivi de l'arobase,
() suivi d'une chaine contenant alphanumérique ou trait d'union,
() répété au moins une fois,
() suivi d'un point puis d'un alphanumérique
() puis d'une chaine contenant alphanumérique répété, point ou trait d'union,
() répétée zéro ou plusieurs fois,
() et se termine par un alphanumérique
Ici, seul le premier défaut du précédent a été corrigé :o(
"(http://|ftp://)([\w-\.)(\.)([a-zA-Z]+)"
devrait valider une adresse URL
() http:// ou ftp://
() suivi
()
()
()
()
À noter cependant, dans une chaîne de caractères, le code "\" doit être doublé. Par exemple on écrira \\d pour représenter le symbole \d, un digit. Ce n'est pas le cas quand on entre l'expression régulière dans un formulaire, ni dans la forme litérale (sans guillemets, mais entre / /.
Plus aucun problème en JS... une expression régulière peut tout trouver... la preuve...
Il faudra aborder d'autres notions en JS pour comprendre à fond cet exemple :
les fonctions avec un paramètre (abordées au chapitre 7),
les conditions if-else (abordées au chapitre 15).
Nous verrons même que la présentation peut en être améliorée quand nous aurons vu l'analyse des formulaires (au chapitre 37).
À chacune de ces étapes, nous reviendrons sur cette nouvelle modalité de la programmation.
La source JS :
function f_rechercher(f) {
var mot = f.le_mot.value;
var exp=new RegExp(mot,"g");
if ( exp.test(f.texte.value) ) {
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 :-( ");
}
}
Et, en attendant de plus amples précisions, quelques mots d'explication :
function f_rechercher(f) { et la ligne finale } ;function suivi du nom donner à la fonction, ici f_rechercher, suivi de parenthèses qui contiennent le paramètre transmis, ici f et la ligne se termine par l'ouverture de l'accolade { ;} ouverte en ligne initiale.
f.le_mot.value doit se lire "la valeur de le_mot (qui est le nom du champ input texte) du formulaire f" ; et cette valeur par défaut est le mot 'serez', sauf si vous lui attribuez une autre valeur. Nous en reparlerons quand nous aborderons les objets au chapitre 23, et plus particulièrement quand nous verrons plus en détail l'objet formulaire aux chapitres 36 à 38.
On verra plus loin que JS peut lire des bases de données, mais l'information lue doit parfois être présentée autrement. Si la base donne l'information sous forme "Jules Tartempion" et qu'on doive l'afficher 'Nom, Prénom' comme ceci : "Tartempion, Jules" on pourrait avoir
La source JS :
function f_modifier(f) {
var regul = /(\w+)\s(\w+)/;
var depart = f.le_depart.value;
var nouveau = depart.replace(regul, "$2, $1");
alert(nouveau);
}
Peu d'explications supplémentaires seront nécessaires ici.
La variable regul est une expression régulière qui signifie 'une chaine de caractères alphanumériques répétés une ou plusieurs fois, suivi d'un sépateur blanc, suivi d'une nouvelle chaine de caractères alphanumériques répétés une ou plusieurs fois'.
La variable depart est "la valeur de le_depart (qui est le nom du champ input texte) du formulaire f" passé en paramètre ; et cette valeur par défaut est 'Jules Tartempion'.
Dans la variable nouveau, $2 désigne la 2e variable du critère défini par l'expression régulière, et $1 désigne le 1er...
Les expressions régulières sont souvent utilisées pour vérifier si des éléments introduits au clavier sont corrects. Une adresse e-mail répond-elle par exemple aux critères reconnus ?
Vous souhaitez, par exemple, que tous les visiteurs de vos pages se fassent connaître par un pseudo qui doit comporter de 6 à 9 caractères alphanumériques sans caractères spéciaux, ni accentués. Voilà comment les expressions régulières pourraient vous aider :
La source JS :
function f_verifier(f) {
var expregu=new RegExp("^[a-zA-Z0-9]{6,9}$","g");
le_pseudo=f.pseudo.value;
if ( expregu.test(le_pseudo) ) {
alert("B I E N !\nLe pseudo [ "+le_pseudo+" ] est acceptable :)");
} else {
alert(" D E S O L É !\n\nLe pseudo [ "+le_pseudo+" ] n'est pas admissible ! :(");
}
}
Un nouveau commentaire ici ? Non, sauf peut-être la variable expregul qui est une expression régulière presque équivalente à \w+, sauf que \w+ accepte des caractères alphanumériques y compris le underscore '_', ce que nous ne souhaitions pas ici et que le '+' signifie 'Un ou plusieurs alors que nous souhaitions une répétition entre 6 et 9 fois, d'où {6,9}, de plus, rien avant d'où ce ^ et rien après, d'où ce $, cela pour éviter d'introduire plusieurs mots.
Dans un premier exemple, nous avions montré que l'on pouvait trouver le présence d'un mot dans une chaine de caractères. Il peut aussi s'avérer intéressant de retenir tous les mots d'un texte dans un tableau (array) pour, par exemple, étudier la richesse de vocabulaire d'un élève et la fréquence d'utilisation de chacun des mots.
Nous avons décidé d'employer l'espace comme séparateur d'éléments, mais tout autre choix peut être fait... les points, points d'exclamation et points d'interrogation pour retrouver les phrases, etc.
La source JS :
function f_decouper(f) {
var mon_texte = f.texte2.value;
var mon_tableau= mon_texte.split(/\s/g);
alert(mon_tableau+"\nCe tableau compte "+mon_tableau.length+" éléments");
}
Un peu tôt pour voir expliquer ce qu'est un tableau ou array en JS... retenez seulement qu'il s'agit d'une variable qui peut contenir plusieurs variables. Nous verrons cela plus en détail dans le chapitre 26 et suivants. Ici, vous verrez tous les éléments du tableau, séparés par des virgules... et le point d'interrogation est l'un de ces éléments, puisque encadrés de deux espacements typographiques.
Si vous devez attribuer des adresses mail à un groupe, vous devez savoir qu'une adtresse mail ne peut contenir de caractères accentués ni de caractères spéciaux et sont recommandés en bas de casse (minuscules, voir ici). Les expressions régulières JS peuvent vous aider à remplacer les caractères accentués par leur équivalent non accentué. Voyez plutôt :
La source JS :
function f_attribuer(f) {
var le_prennom = f.prennom.value;
var le_mail = le_prennom.toLowerCase();
var regAccentA = new RegExp('[àâä]', 'gi');
var regAccentE = new RegExp('[éèêë]', 'gi');
var regCarSpe = new RegExp('[\']', 'gi');
var regDot = new RegExp('[ ]', 'gi');
//
le_mail = le_mail.replace(regAccentA,'a');
le_mail = le_mail.replace(regAccentE,'e');
le_mail = le_mail.replace(regDot,'.')
le_mail = le_mail.replace(regCarSpe,'');
le_mail = le_mail+'@cuy.be';
alert(le_mail);
}
Pas de commentaires particuliers, sauf l'emploi d'une méthode replace() souvent utilisée avec des expressions régulières... sujet développé dans la séquence suivante.
Bref, la lecture de cette séquence vous a permis de découvrir qu'il reste beaucoup de sujets à traiter avant de pouvoir utiliser JS avec un peu plus d'aise. Le même constat sera fait en parcourant la séquence suivante, mais pas de panique si vous avez du mal à digérer ce sujet. Dès le chapitre suivant, nous reprendrons un rythme plus acceptable. N'oubliez pas de revenir à cette séquence lorsque vous aurez terminé la lecture de tout ce tutoriel.
voir suite >>>
voir suite >>>
voir suite >>>