M1 Multimdia Semestre Printemps 2017 1

TP4 Expressions rgulires avec JavaScript

1 Construire des expressions rgulires en JavaScript

Il existe deux faons de construire des dexpressions rgulires en JavaScript :

La premire dentre elles, vue dans les exemples, consiste utiliser une variable littrale RegExp contenant le
motif. Avec cette mthode, il est possible dutiliser les tiquettes g, i et m, en les plaant directement la fin de
la variable RegExp. Le tableau ci-dessous prcise comment ces tiquettes sont interprtes.

Etiquette Interprtation
g Global / glouton correspondance effectue plusieurs fois
i Insensible la casse des caractres est ignore
m Multi-lignes - ^ et $ permettent didentifier les caractres de fin de ligne

// Expression rgulire pour identifier une chane de caractres JavaScript.

var mon_regexp = /"(?:\\.|[^\\\"])*"/g;

La deuxime mthode repose sur lutilisation du constructeur RegExp. Ce constructeur prend en entre deux
paramtres, puis les compile en un objet RegExp. Le premier paramtre est une chane de caractres. Il convient
dtre prudent lors de la construction de la chane de caractres, car le caractre \ a une signification
diffrente au sein dun objet RegExp et au sein dune variable littrale. Il est gnralement ncessaire de
doubler les backslashes et dspcifier les guillemets. Le deuxime paramtre est une chane de caractres
prcisant ltiquette utiliser. Cette mthode est utile lorsque lexpression rgulire doit tre gnre
lexcution, en utilisant des ressources qui ne sont pas disponibles pour le programmeur. Les proprits dun
objet RegExp sont donnes dans le tableau ci-dessous.

Proprit objet RegExp Utilisation

global Vrai si ltiquette g a t utilise.
ignoreCase Vrai si ltiquette i a t utilise.
multiline Vrai si ltiquette m a t utilise.
lastIndex Valeur de lindex partir du quel commencer la prochaine correspondance exec.
Par dfaut, il vaut 0.
source Le texte source de lexpression rgulire.

// Expression rgulire pour identifier une chane de caractres JavaScript.

var mon_regexp = new RegExp("\"(?:\\.|[^\\\\\\\"])*\"", 'g');

Ana ROXIN Page 1

 M1 Multimdia Semestre Printemps 2017 2
TP4 Expressions rgulires avec JavaScript

2 Les mthodes
Les expressions rgulires sont utilises avec des mthodes pour chercher, remplacer et extraire des informations
partir de chanes de caractres. Les mthodes suivantes sappliquent en JavaScript :

Nom mthode Description

regexp.exec(string) Ceci est la mthode la plus puissante (mais aussi la plus lente) : si regexp et
string correspondent, la mthode retourne un tableau. Llment 0 du tableau
contient la sous-chane qui correspond regexp. Llment 1 reprsente le texte
captur par le 1er groupe, etc. Sil ny a pas de correspondance, cela retourne
null.
regexp.test(string) Cest la mthode la plus simple (et la plus rapide). Si regexp correspond
string, cela retourne vrai ; sinon faux.
En rgle gnrale, les meilleures expressions rgulires sont courtes et simples. Celles qui sont plus compliques ont
plus de chances davoir des problmes de portabilit. Les expressions rgulires imbriques connaissent des
performances limites dans certaines implmentations. La simplicit est la meilleure stratgie.

2.1 Exemple 1 identification dURLs (mthode exec)

Soit lexpression rgulire suivante qui identifie les URLs :
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)

(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;

Nous allons utiliser la mthode exec de cette expression rgulire avec la variable suivante :
var url = http://www.ora.com:80/goodparts?q#fragment;

Si la variable url correspond lexpression rgulire dfinie dans parse_url, alors cela retournera un tableau
contenant des lments extraits partir de la chane de caractres initiale (url).
Considrons le code suivant :

var url = "http://www.ora.com:80/goodparts?q#fragment";

var result = parse_url.exec(url);
var names = ['url','scheme','slash','host','port','path','query','hash'];
var blanks = ' ';
var i;
for (i = 0; i < names.length; i += 1) {
document.writeln(names[i] + ':' +
blanks.substring(names[i].length), result[i]);
}

Ce code produit le rsultat suivant:

url: http://www.ora.com:80/goodparts?q#fragment
scheme: http
slash: //
host: www.ora.com
port: 80
path: goodparts
query: q
hash: fragment

La figure suivante illustre les traitements effectus par le motif dfini dans parse_url :

Ana ROXIN Page 2

 M1 Multimdia Semestre Printemps 2017 3
TP4 Expressions rgulires avec JavaScript

Afin de mieux comprendre les rsultats, tudions le motif parse_url :

Partie tudie Explication

^ Dbut de chane
(?:([A-Za-z]+):) Permet didentifier un nom de schma, seulement si suivi de : . ( ?:) prcise quil
sagit dun regroupement non-mmorisant. ? en suffixe prcise que la prsence de
ce groupe est optionnelle. Par contre ([A-Za-z]+) est un groupement mmorisant et le
texte identifi par ce groupe sera contenu dans result[1].
(\/{0,3}) Cest le 2e groupement mmorisant. Il cherche identifier le caractre /
(dspcifi avec \ ) rpt 0, 1, 2 ou 3 fois.
([0-9.\-A-Za-z]+) Ce 3e groupement mmorisant permet didentifier un nom dhte, qui est compos dun
ou plusieurs chiffres, lettres, le caractre . ou - (ici dspcifi).
(?::(\d+))? Ce 4e groupement mmorisant identifie (optionnellement le numro de port, cest--
dire une squence dun ou plusieurs chiffres prcds par le caractre : .
(?:\/([^?#]*))? Cest un autre groupement optionnel, qui dbute avec le caractre / et qui
contient le groupement mmorisant 5. La classe de caractres [^ ?#] correspond tous
les caractres1 sauf ? et # . Ces caractres sont indentifis 0 ou plusieurs fois
(caractre *).

1 Cette classe contient aussi des caractres tels que la fin de ligne ou des caractres de contrle qui ne devraient pas tre
identifis ici. En pratique, il faudrait mieux spcifier cette classe, afin dviter les erreurs. En effet, les expressions
rgulires mal crites sont une source frquente derreurs de scurit.

Ana ROXIN Page 3

 M1 Multimdia Semestre Printemps 2017 4
TP4 Expressions rgulires avec JavaScript

(?:\?([^#]*))? Il sagit dun autre groupement non-mmorisant dbutant avec le caractre ? et

contenant la mmorisation 6 (contient 0 ou plusieurs caractres qui ne sont pas des
# ).
(?:#(.*))? Dernier groupement optionnel, qui dbute avec un # et qui contient le groupement
mmorisant 7 (tout caractre sauf la fin de ligne)
$ Fin de la chane

2.2 Exemple 2 identification de nombres (mthode test)

Considrons lexemple de lexpression rgulire suivante qui permet didentifier des nombres sous diffrentes
formes : entiers signs ou pas, avec partie dcimale ou sans, avec exposant ou pas.

Soit le code suivant :

var parse_number = /^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i;

var test = function (num) {
document.writeln(parse_number.test(num));
};
Ce code produit le rsultat suivant:

test('1'); // true
test('number'); // false
test('98.6'); // true
test('132.21.86.100'); // false
test('123.45E-67'); // true
test('123.45D-67'); // false
La figure suivante illustre les traitements effectus par le motif dfini dans parse_number :

Afin de mieux comprendre les rsultats, tudions le motif parse_number :

Partie tudie Explication

/^$/i Nous utilisons ^ et $ pour ancrer notre motif. Cela permet de considrer tous les
caractres dans le texte pour lopration de correspondance. Sans ces ancres,
lexpression rgulire nous indiquera seulement si le texte contient un nombre. Avec les
ancres, elle indique si le texte contient seulement un nombre. Ltiquette i la fin

Ana ROXIN Page 4

 M1 Multimdia Semestre Printemps 2017 5
TP4 Expressions rgulires avec JavaScript

permet dtre insensible la casse, et donc didentifier la fois le caractre e et

E . Cela nous permet dviter les syntaxes suivantes [Ee] ou ( ?:E|e)
-? Spcifie que le signe - est optionnel.
\d+ Un ou plusieurs chiffres.
(?:\.\d*)? On utilise un groupement non-mmorisant afin damliorer les performances. Ceci
permet didentifier un sparateur dcimal (ici le caractte . ) suivi par 0 ou
plusieurs chiffres.
(?::(\d+))? Ce 4e groupement mmorisant identifie (optionnellement le numro de port, cest--
dire une squence dun ou plusieurs chiffres prcds par le caractre : .
(?:e[+\-]?\d+)? Cest un autre groupement optionnel, qui identifie le caractre e ou E , un signe
optionnel et un ou plusieurs chiffres.

3 Autres exemples
3.1 Les objets RegExp crs par des expressions rgulires
partagent une mme instance
function test() {
return /a/gi;
}
var x = test();
var y = test(); // x et y sont le mme objet
x.lastIndex = 10;
document.writeln(y.lastIndex); // 10

3.2 Mthode exec - manipulation du tableau de rsultats (1)

var re = new RegExp("JS*", "ig");
var str = "cfdsJS *(&YJSjs 888JS";
var resultArray = re.exec(str);
while (resultArray) {
document.writeln(resultArray[0]);
document.writeln(" prochaine correspondance dbute "+re.lastIndex+"<br />");
resultArray = re.exec(str);
}
Le motif recherch ici est form du caractre J suivi de 0 ou plusieurs fois le caractre S . En utilisant
ltiquette i, la casse est ignore. En utilisant ltiquette g, la proprit lastIndex de lobjet RegExp est
dfinie sur la valeur de lindex o a t trouv le dernier motif, pour chaque appel successif. De cette manire,
chaque nouvel appel la mthode exec permet de trouver le prochain motif. On affiche donc les 4 lments
trouvs, puis lorsquon nen trouve plus, la valeur null est dfinie pour le tableau de rsultats. Ceci permet de
sortir de la boucle.

Voici la sortie du programme :

JS prochaine correspondance dbute 6

JS prochaine correspondance dbute 13
js prochaine correspondance dbute 15
JS prochaine correspondance dbute 21

La mthode exec retourne donc un tableau, mais les lments du tableau ne sont pas tous des correspondances ; il
sagit de la correspondance en cours et les ventuels groupements mmorisants.

Ana ROXIN Page 5

 M1 Multimdia Semestre Printemps 2017 6
TP4 Expressions rgulires avec JavaScript

3.3 Mthode exec - manipulation du tableau de rsultats (2)

En effet, si vous utilisez des parenthses pour identifier des portions de la chaine de caractres globale, ces
slections sont incluses en tant quentres succssives du tableau rsultat, la suite de la chane identifie (contenue
la position 0 du tableau).

Soit lexemple suivant :

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RegExp string matching</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var re = /(ds)+(j+s)/ig;
var str = "cfdsJS *(&dsjjjsYJSjs 888dsdsJS";
var resultArray = re.exec(str);
while (resultArray) {
document.writeln(resultArray[0]);
document.writeln(" corresp. suiv. dbute "+re.lastIndex+"<br />");
for (var i = 1; i < resultArray.length; i++) {
document.writeln("sous-chaine de " + resultArray[i] + "<br />");
}
document.writeln("<br />");
resultArray = re.exec(str);
}
}
//]]>
</script>
</head>
<body>
<p></p>
</body>
</html>

Ce code produit le rsultat suivant :

dsJS corresp. suiv. dbute 6

sous-chaine de ds
sous-chaine de JS
dsjjjs corresp. suiv. dbute 16
sous-chaine de ds
sous-chaine de jjjs
dsdsJS corresp. suiv. dbute 31
sous-chaine de ds
sous-chaine de JS

Ana ROXIN Page 6

 M1 Multimdia Semestre Printemps 2017 7
TP4 Expressions rgulires avec JavaScript

4 Exercice remplacer tous les espaces

a) Ecrivez le code JavaScript permettant, dans une chane de caractres, de :

o Trouver le motif compos dun caractre despacement suivi du caractre *

o Remplacer ce motif par le caractre -

o Appliquer ce motif la chane de caractres Eh a va la vache ! .

o Afficher le rsultat lutilisateur.

b) Modifiez le motif afin quil permette didentifier tous les caractres entre guillemets.

5 Exercice date
Ecrivez le code JavaScript, qui, pour une chane de caractres donne, vrifie si elle contient une date au format
JJ Mois AAAA . Nous faisons lhypothse quune telle date dbute aprs le caractre : .

6 Exercice inverser lordre des mots

Ecrivez une fonction JavaScript qui permet didentifier des mots spars par un ou plusieurs caractres -, puis qui
change lordre des mots.

Exemple : (Entre : Mot1--------Mot2) (Sortie : Mot2-Mot1)

7 Exercice expressions rgulires pour formulaires

a) Ecrivez les motifs permettant de tester la validit des lments suivants :
o Un identifiant de certificat : contient 13 caractres alphanumriques, avec les lettres BUS entre
la 6e et la 8e position
o Une date aux formats suivants : JJ/MM/AAAA ou JJ/MM/AAAA HH:MM:SS
o Une adresse postale franaise, en retournant les diffrentes parties de ladresse, savoir :
0 = Adresse complte, 1 = Numro de rue + BIS, TER ou QUATER, 2 = Numro de rue, 3 et 4 =
BIS, TER ou QUATER, 5 9 = Rien, 10 = Nom de rue 11 = Rien, 12 = code postal, 13 = Ville.
Exemple reconnu : 48 bis Avenue Des Champs lyse 75001 Paris
Exemple non-reconnu : Rue De La Libert 10 1000 Bruxelles
o Un numro de TVA: 0 ou un FR + 0 ou un espace + 11 caractres (caractres alphabtiques
compris - sauf O ou I (en 1e ou 2e positions ou en 1e et 2e position))
Exemples reconnus : 12345678901 - X1234567890 - 1X123456789 - XX123456789
Exemples non-reconnus : FR I123456789, FR O123456789, FR 1O23456789
o Un numro de scurit sociale franais, avec ou sans la cl
Exemples reconnus : 181049520156962, 1 81 04 95 201 569 62, 1 81 04 95 201 569
Exemples non-reconnus : 1 81049520156962, 181049520156962fds,
1810495201569ds
b) Ecrivez le code JavaScript permettant de :
o Prendre en entre une expression rgulire saisie dans un champ de formulaire et une chane de
caractres saisie dans un autre champ de formulaire
o Teste la correspondance entre les deux lorsque le formulaire est soumis.

Ana ROXIN Page 7

 M1 Multimdia Semestre Printemps 2017 8
TP4 Expressions rgulires avec JavaScript

o Les rsultats du test sont affichs dans un troisime champ du mme formulaire.

8 Ressources utiles
http://www.asciitable.com/

http://regexlib.com/

Ana ROXIN Page 8