Scribd
Importer
44 vues49 pages

07JavaScript ExpressionsReguliers

Transféré par

hibapisc
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
44 vues49 pages

07JavaScript ExpressionsReguliers

Transféré par

hibapisc
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

1

JavaScript
Les Expressions
Régulières

1
1
Expression régulières
• Une expression régulière est un objet (RegExp)qui
définit un motif (pattern) utilisé pour effectuer des
tests, recherches et remplacement dans les strings.
• Une expression régulière est souvent utilisée pour
valider une entrée de l'utilisateur.
• Pour créer une expression régulière on peut
procéder de deux manières:
• Utiliser la fonction constructeur RegExp
• var patt = new RegExp(pattern)
• Utiliser une constante string délimitée par deux slash
• /pattern/
2
Les expressions régulières sont souvent utilisées
conjointement avec les cinq méthodes ci-dessous:
❑ Méthodes de l'objet String:
❖ match() ; [Link](regexp)
❖ search(); [Link](regexp)
❖ replace() ; [Link](regexp, strR)
❑ Méthodes de l'objet regExp:
❖ exec(); [Link](str)
❖ test(); [Link](str)
3
Objet String : méthode match()
• La méthode match() permet d'obtenir le tableau des correspondances
entre la chaîne courante et une expression régulière.
• La syntaxe est :
➢[Link](regexp)

Str = Une string


Regexp : Un objet représentant une expression régulière. Si ce n'est pas un
objet de type RegExp, celui-ci sera converti en un objet RegExp grâce
à new RegExp(regexp).
Match() renvoie sous forme de tableau l’expression recherchée autant de
fois qu’elle a été trouvée.
En l’utilisant avec une regexp, cependant, elle ne renverra que la première
occurrence trouvée sauf si nous ajoutons l’option g (pour effectuer une
recherche globale) à notre regex.

4
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>Lancez-vous dans JavaScript, relancez-vous pour de bon !</p>
<p id="reg"></p>
<script>
var expr = [Link]('p');
var regExp1 = /Lancez/i; //regex avec l'option i
var regExp2 = /Lancez/ig; //regex avec les options i et g
//Recherche avec match()
l> var res1 = [Link](regExp1);
var res2 = [Link](regExp2);
var resultat = [Link]('reg');
[Link] =
'Résultat match() avec regExp1 : ' + res1 +
'<br>Résultat match() sur regExp 2 : ' + res2;
</script>
</body>
</htm 5
Objet String : méthode search()

La métthode search() retourne la position de la première occurrence de


l’expression recherchée dans une chaîne de caractères ou -1 si elle n’a pas été
trouvée.
La sysntaxe est:
[Link](regExp);
L’utilisation va être très similaire à match().

6
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>Lancez-vous dans JavaScript, relancez-vous pour de bon !</p>
<p id="reg"></p>
<script>
var expr = [Link]('p');
var regExp1 = /lancez/i; //regexp avec l'option i
var regExp2 = /lancez/; //regex sans option
var regExp3 = /manger/;
//Recherches avec search()
var res1 = [Link](regExp1);
var res2 = [Link](regExp2);
var res3 = [Link](regExp3);
//Affichage des résultats
var resultat = [Link]('reg');
[Link] =
'Résultat search() sur regex 1 : ' + res1 +
'<br>Résultat search() sur regex 2 : ' + res2 +
'<br> Résultat search() sur regex 3: ' + res3;
</script>
</body>
</html>

7
String : méthode replace()
La méthode replace() permet de rechercher une expression et de la remplacer
par une autre.
La syntaxe est :
[Link](regExp, strR)

Comme le montre la syntaxe, cette méthode prend deux arguments :


l’expression à rechercher (qui sera notre regExp), et l’expression de
remplacement strR.

8
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>Lancez-vous dans JavaScript, lancez-vous pour de bon!</p>
<p id="reg"></p>
<script>
var expr = [Link]('p');
var regExp1 = /z-vous/; //regex sans options
var regExp2 = /z-vous/g; //regExp avec l'option g
//Recherches avec search()
var res1 = [Link](regExp1, 's-toi');
var res2 = [Link](regExp2, 's-toi');
var resultat = [Link]('reg');
[Link] =
'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2;
</script>
</body>
</html> 9
Objet regExp : méthode test()
La méthode test() cherche une séquence de caractères
dans une chaîne de caractères.
Si la séquence est trouvée, la méthode test() renvoie
la valeur booléenne true. Dans le cas contraire, elle
renvoie false.
La syntaxe est :
[Link](str)

regex est un objet regExp.


Str est une String.

10
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head> <body>
<h1>Expressions régulières et JavaScript</h1>
<p>Lancez-vous dans JavaScript, relancez-vous pour de bon !</p>
<p id="reg"></p>
<script>
var rec = [Link]('p').textContent;
var pattern1 = /LANCEZ/; //regExp sans option
var pattern2 = /LANCEZ/i;//regExp avec l'option i
//Recherche avec test()
var res1 = [Link](rec);
var res2 = [Link](rec);
//Affichage des résultats
var resultat = [Link]('reg');
[Link] =
'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2;
</script>
</body></html>
11
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Expression réguliere01</title>
</head><body><p id="para1"></p><p id="para2"></p>
<script>
var pat1 = /som/
var pat2 = new RegExp("la");
var d = new Date()
var strDate = [Link]() +"/" + ([Link]()+1) + "/" +
[Link]()
var str1 = "Nous sommes le " + strDate;
[Link]("para1").innerHTML = str1;
var res1 = [Link](str1); //str1 contient t-elle "som"?
var res2 = [Link](str1); //str1 contient t-elle "la"?
var res3 = /\d/.test(str1); //str1 coontient t-elle un chiffre?
var res4 = /^n/[Link](str1); //la chaine commence t-elle par n ou N
[Link]("para2").innerHTML = "res1 : " + res1 +
"<br>res2 : " + res2 +
"<br>res3 : " + res3 +
"<br>res4 : " + res4;
</script></body></html>

12
Objet RegExp : méthode exec()

La méthode exec() recherche une séquence de caractères dans une chaîne de


caractères, mais renvoie le texte trouvé ou null si la recherche n’a pas été
fructueuse.

La syntaxe est :
[Link](str)

Notez que si la séquence est trouvée plusieurs fois dans la chaîne de caractères,
celle-ci ne sera renvoyée qu’une seule fois.

13
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>Lancez-vous dans JavaScript, relancez-vous pour de bon !</p>
<p id="reg"></p>

<script>
var str = [Link]('p').textContent;
var pattern1 = /JAVASCRIPT/i;
var pattern2 = /JAVASCRIPT/;
//Recherche avec exec()
var res1 = [Link](str);
var res2 = [Link](str);
var resultat = [Link]('reg');
[Link] = 'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2;
</script>
</body>
</html> 14
Pattern qui correspondent aux positions dans
une string
Pattern Correspond à
Début de la chaine (utiliser \^ pour faire correspondre au
^
caractère ^)
Fin de la chaine (utiliser \$ pour faire correspondre à la fin
$
de la chaine)
Caractère de mot qui n'est pas suivi ou précédé par un
caractère de mot.
\b
Un caractère de mot est n'importe quelle lettre minuscule(a-
z), majuscule(A-Z), chiffre(0-9) et underscore(_).
Caractère de mot qui est suivi ou précédé par un caractère
\B de mot.

15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expression régulière</title>
</head>
<body>
<h1>Pattern qui correspondent aux positions dans une string</h1>
<p>Lancez-vous dans f JavaScript, relancez-vous pour de bon !</p>
<p id="reg"></p>
<script>
var str = [Link]('p').textContent;
var pattern1 = /^L/i;
var pattern2 = /!$/;
var pattern3 = /f\b/;
var pattern4 = /f\B/;
//Recherche avec exec()
var res1 = [Link](str);
var res2 = [Link](str);
var res3 = [Link](str);
var res4 = [Link](str);
var resultat = [Link]('reg');
[Link] = 'Résultat 1 : ' + res1 +
'<br>Résultat 2 : ' + res2 +
'<br>Résultat 3 : ' + res3 +
'<br>Résultat 4 : ' + res4;
</script>
</body></html> 16
Les quantifieurs
• Les quantifieurs permettent de dire combien de fois un caractère doit
être recherché.
Quantifier Description
c+ N'importe quelle string qui contient au moins une fois c
(un ou plusieurs ={1,})
c* N'importe quelle string qui contient zero ou plusieurs
occurrences de c{0,}
c? N'importe quelle string qui contient 0 ou 1 occurrence de c
c{n} N'importe quelle string qui contient une sequence de n c
c{n,m} N'importe quelle string qui contient une séquence de n à m c
c{n,} N'importe quelle string qui contient une séquence d'au moins
n c.
?=s N'importe quelle string suivie par une string spécifique s
?!s N'importe quelle string qui n'est pas suivie par une string
spécifique s
17
Quantifieurs : exemple1 d'utilisation
<!DOCTYPE html>
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>
<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;
//On veut savoir si notre paragraphe contient un "x"
var r1 = /x+/;
var res1 = [Link](rec);

/*On cherche "e" ou "end" (on utilise les parenthèses)


*pour faire porter "?" sur "nd"*/
var r2 = /e(nd)?/g;
var res2 = [Link](r2);
18
//Notre paragraphe commence par "o" et finit par "e" ?
var r3 = /^oe$/i;
var res3 = [Link](rec);

//Notre paragraphe contient-il "pp"


var r4 = /p{2}/;
var res4 = [Link](rec);
//Y a t-il l'expression "Java" suivi de "script" ?
var r5 = /Java(?=Script)/;
var res5 = [Link](rec);

var resultat = [Link]('reg');


[Link] =
'Présence d\'un "x" : ' + res1 +
'<br>Occurences de "e" ou "end" : ' + res2 +
'<br>Commence par "o", finit par "e" ? ' + res3 +
'<br>Contient deux "p" à la suite ? : ' + res4 +
'<br>Présence de "Java" suivi de "Script" ? :' +
res5;
</script>
</body>
</html>
19
Quantifieurs : exemple2 d'utilisation
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Expressions régulières : Quantificateurs</title>
</head><body>
<p id="para1"></p><p id="para2"></p><p id="para3"></p>
<p id="para4"></p>
<script>
var $ = function(id){return [Link](id);};
var phone = "559-555-6627";
var fax = "(559) 555-6635";
var pat1 = /^\d{3}-\d{3}-\d{4}$/;
var pat2 = /^\(\d{3}\) ?\d{3}-\d{4}$/;
alert([Link](phone));
alert([Link](fax));
$("para1").innerHTML = [Link](pat1);
$("para2").innerHTML = [Link](pat2);
</script></body></html>
20
Les options ou modificateurs

Les options, qu’on appelle également modificateurs, vont


servir à ajouter des options à notre recherche.
Les options vont être représentées par des lettres qu’on
va écrire après le deuxième caractère d’encadrement de
notre regex.
Il existe trois options :
➢ l’option i,
➢ l’option g
➢ et l’option m.

21
L’option i nous permet de ne pas tenir compte de
la casse dans notre regex, ou plutôt d’accepter
toutes les combinaisons minuscules / majuscules
représentant la séquence de notre regex.
L’option g sert à exécuter des recherches globales :
plutôt que de s’arrêter au premier résultat trouvé,
on va chercher tous les résultats disponibles.

22
L’option m permet d’effectuer la recherche sur
plusieurs lignes.
Plus précisément, l'option m considére chaque
retour à la ligne comme la fin d’une ligne et le
début d’une autre ligne.
L’option m est généralement utilisée avec les
quantifieurs ^ et $ qui vont alors considérer
chaque retour à la ligne comme la fin d’une
première chaîne et le début d’une autre.

23
<!DOCTYPE html>
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>

<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;
var rec2 = 'Je suis sur \ndeux lignes en Js'

//On cherche "on", "On", "oN" ou "ON"


var r1 = /on/i;
var res1 = [Link](r1);

//On cherche tous les 'e'


var r2 = /e/g;
var res2 = [Link](r2);
24
//On cherche si une ligne commence par "d" (sans m) dans rec2
var r3 = /^d/;
var res3 = [Link](rec2);

//On cherche si une ligne commence par "d" (avec m) dans rec2
var r4 = /^d/m;
var res4 = [Link](rec2);

var resultat = [Link]('reg');


[Link] =
'Résultat regex 1 : ' + res1 +
'<br>Résultat regex 2 : ' + res2 +
'<br>Résultat regex 3 : ' + res3 +
'<br>Résultat regex 4 : ' + res4;
</script>
</body>
</html>

25
LES CLASSES DE CARACTERES
Les classes de caractères permettent de spécifier des plages de caractères pour effectuer
nos recherches. Pour déclarer une classe de caractères, nous utilisons une paire de
crochets [], ou dans des cas particuliers des parenthèses.
Le tableau ci-dessous montre quelques exemples de classes de caractères

CLASSE Signification

[abcde] Trouve tous les caractères à l’intérieur des crochets

[^abcde] Trouve tout caractère ne se situant pas entre les crochets

[a-z] Trouve n’importe quelle lettre entre a et z

Trouve n’importe quel caractère qui n’est pas une lettre minuscule de
[^a-z]
l’alphabet

[0-9] Trouve n’importe quel nombre entre 0 et 9

[^0-9] Trouve n’importe quel caractère qui n’est pas un nombre compris entre 0 et 9

(jour|soir) Trouve jour ou soir. Remarquez l'utilisation des parenthèses. 26


L’intérêt des classes de caractères est de permettre de
rechercher plusieurs caractères ou plusieurs séquences de
caractères différents d’un seul coup.
Dans l’exemple qui suit, en utilisant la classe de
caractères [aeiouy]. match() cherche chaque voyelle présente
dans notre paragraphe.
Si l’on mentionne aeiouy dans notre regex sans utiliser de classe,
c’est bien la séquence aeiouy qui va être recherchée dans son
ensemble.

27
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8"> </head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les regex en JavaScript</p>
<p id="reg"></p>
<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;
//On cherche "aeiouy"
var r1 = /aeiouy/g;
var res1 = [Link](r1);
//On cherche tous les 'a', 'e', 'i', 'o', 'u' et 'y'
var r2 = /[aeiouy]/g;
var res2 = [Link](r2);
var resultat = [Link]('reg');
[Link] =
'Recherche sans classe : ' + res1 +
'<br>Recherche avec classe : ' + res2;
</script>
</body></html>
28
Les classes : Exemple 2
<!DOCTYPE html>
<html> <head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>
<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les regex en JavaScript en 2015</p>
<p id="reg"></p>

<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;

//On cherche toutes les majuscules entre C et X


var r1 = /[C-X]/g;
var res1 = [Link](r1);
//On cherche n'importe quel caractère sauf a, e, i, o, u
var r2 = /[^aeiou]/g;
var res2 = [Link](r2);
29
//On cherche tous les chiffres entre 0 et 9
var r3 = /[0-9]/g;
var res3 = [Link](r3);
/*On cherche si on a bien une majuscule en début de chaîne.
*Attention : le "^" est bien en dehors de notre classe*/
var r4 = /^[A-Z]/;
var res4 = [Link](rec);

//On cherche toute succession de quatre chiffres


var r5 = /[0-9]{4}/;
var res5 = [Link](r5);

var resultat = [Link]('reg');


[Link] =
'Majuscules entre C et X : ' + res1 +
'<br>Tout sauf voyelles minuscules : ' + res2 +
'<br>Tous les chiffres : ' + res3 +
'<br>Majuscule en début de chaîne ? : ' + res4 +
'<br>Succession de 4 chiffres : ' + res5;
</script>
</body>
</html>
30
Les classes : Exemple 3 Utilisation de plusieurs Intervalles
<!DOCTYPE html>
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>

<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les [regex] en JavaScript en
2019</p>
<p id="reg"></p>

<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;

//On cherche tout entre a et z plus "à", "é" et "è"


var r1 = /[a-zàéè]/g;
var res1 = [Link](r1);
31
//On cherche tout entre a et z, A et Z et 0 et 9
var r2 = /[a-zA-Z0-9]/g;
var res2 = [Link](r2);

/*On cherche tout ce qui n'est pas dans a-z ni A-Z


*Les espaces vont donc être comptés*/
var r3 = /[^a-zA-Z]/g;
var res3 = [Link](r3);

var resultat = [Link]('reg');


[Link] =
'Lettre min plus "à", "é" et "è" : ' + res1 +
'<br>Lettre min, maj et chiffre : ' + res2 +
'<br>Tout sauf a-z et A-Z : ' + res3;
</script>
</body>
</html>

32
recherche de caractères spéciaux
introduire un caractère spéciale dans un pattern
(utiliser le backaslash(\))
Beaucoup de caractères spéciaux parenthèses, crochets, slashs, symbole dollar ou tréma,
etc.) sont utilisés par les regex et possèdent une signification précise. Pour rechercher ce
genre de caractères, vous devrez les échapper avec un antislash.
Pattern Correspond à
\\ Caractère backslash (\)
\/ Caractère slash(/)
\t Caractère tabulation
\n Caractère nouvelle ligne
\r Caractère retour chariot
\f Caractère Form Feed
[\b] Caractère backslash. Le seul caractère qui doit être placé
entre crochets
\udddd Caractère unicode dont le code est spécifié en hexa
\xdd Équivalent à \u00dd : caractère dont le code unicode <=255
33
Recherche des caractères spéciaux : Exemple de programme

<!DOCTYPE html>
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>

<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les [regex] en 2-0-2-2 ?</p>
<p id="reg"></p>

<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;

//On cherche "[regex]". On doit échapper "[" et "]"


var r1 = /\[regex\]/g;
var res1 = [Link](r1);

34
//On cherche "[" et "]" et "e" en créant une classe
var r2 = /[e\[\]]/g;
var res2 = [Link](r2);

/*On cherche les chiffres et "-". Pour chercher le tiret


*dans une classe, on le place à la fin pour éviter les
*confusions avec les intervalles*/
var r3 = /[0-9-]/g;
var res3 = [Link](r3);
//On cherche "?" en fin de chaine
var r4 = /\?$/;
var res4 = [Link](r4);
var resultat = [Link]('reg');
[Link] =
'Recherche "[regex]" : ' + res1 +
'<br>Recherche "e", "[" et "]" : ' + res2 +
'<br>Recherche 0-9 et "-" : ' + res3 +
'<br>Recherche "?" en fin de chaîne : ' + res4;
</script>
</body>
</html>
35
Les méta-caractères, ou classes
abrégées???
Les méta-caractères sont des caractères qui possèdent une
signification spéciale. Leur spécificité est qu’ils commencent
par un antislash (sauf le point). Ce sont des classes qui sont
couramment utilisées et vont donc nous servir à écrire ces
classes plus rapidement.
Le tableau ci-dessous présente la liste des méta-caractères
les plus utilisés :

36
META
CARACTERE
SIGNIFICATION

Seul méta-caractère ne possédant pas d’antislash. Trouve tout caractère, sauf un


.
retour à la ligne
Trouve un caractère de mot.
Un caractère de mot est n'importe quelle lettre minuscule(a-z), majuscule(A-Z),
\w
chiffre(0-9) et underscore(_).
Equivalent à [a-zA-Z0-9_]
\W Trouve tout ce qui n’est pas un caractère de mot. Equivalent à [^a-zA-Z0-9_]

\d Trouve n’importe quel chiffre. Equivalent à [0-9]

\D Trouve tout sauf un chiffre. Equivalent à [^0-9]


\s Trouve un espace
\S Trouve tout sauf un espace
Caractère de mot qui n'est pas suivi ou précédé par un caractère de mot.
\b Un caractère de mot est n'importe quelle lettre minuscule(a-z), majuscule(A-Z),
chiffre(0-9) et underscore(_).
\B Caractère de mot qui est suivi ou précédé par un caractère de mot.

\n Trouve un retour à la ligne (le « \n » en JavaScript) 37


<!DOCTYPE html>
<html>
<head>
<title>Les expressions régulières</title>
<meta charset="utf-8">
</head>

<body>
<h1>Expressions régulières et JavaScript</h1>
<p>On apprend à utiliser les regex en 2015</p>
<p id="reg"></p>

<script>
//On accède au texte de notre paragraphe
var rec = [Link]('p').textContent;

//On cherche tout sauf une nouvelle ligne


var r1 = /./g;
var res1 = [Link](r1);

//On cherche tout chiffre


var r2 = /\d/g;
var res2 = [Link](r2); 38
//On cherche tout ce qui n'est pas un chiffre
var r3 = /\D/g;
var res3 = [Link](r3);

//On cherche un "r" en début ou fin d'un mot


var r4 = /\br/;
var res4 = [Link](rec);

var resultat = [Link]('reg');


[Link] =
'Tout sauf une nouvelle ligne : ' + res1 +
'<br>Tous les chiffres : ' + res2 +
'<br>Tout sauf "[0-9]" : ' + res3 +
'<br>r en début ou fin de mot ? : ' + res4;
</script>
</body>
</html>

39
Regroupement et Alternatives
Symbole Description
() Regroupe des caractères pour être cherché comme un tout. Il ya
possibilité d'imbrication
() Outre le regroupement de caractères (voir ci-dessus), les
parenthèses servent également à capturer le sous-motif souhaité
dans un motif. Les valeurs des sous-motifs peuvent ensuite être
récupérées à l'aide de RegExp. $ 1, RegExp. $ 2, etc. une fois que
le motif lui-même est mis en correspondance ou comparé.
Par exemple, ce qui suit correspond à «2 chapitres» dans «Nous
lisons 2 chapitres en 3 jours», et isole en outre la valeur «2»:
var mystring = "Nous lisons 2 chapitres en 3 jours"
var aiguille = / (\ d +) chapitres /
[Link] (aiguille) // correspond à "2 chapitres"
alert(RegExp. $ 1) // affiche le sous-motif capturées, ou "2 "
Le sous-motif peut également être référencé ultérieurement
dans le motif principal.

40
Regroupement et Alternatives

Symbole Description
(?:x) Correspond à x mais ne le capture pas. En d'autres termes,
aucune référence numérotée n'est créée pour les éléments
entre parenthèses.
x(?=y) Lookahead positif: correspond à x uniquement s'il est suivi de
y. Notez que y n'est pas inclus dans le match, agissant
uniquement comme une condition requise.
x(?!y) Lookahead négatif: correspond à x uniquement s'il n'est PAS
suivi de y. Notez que y n'est pas inclus dans le match, agissant
uniquement comme une condition requise.
| L'alternance combine les clauses en une seule expression
régulière, puis correspond à l'une des clauses individuelles.
Similaire à l'instruction "OR".

41
Regroupement et Alternatives
Symbole Exemple
() /(abc)+(def)/ correspond à une ou plusieurs occurrences de
"abc" suivies d'une occurrence de "def".
() Ce qui suit trouve le texte «Moha Najib» et échange leurs
positions, il devient donc «Najib Moha»:
“Moha Najib".replace(/(Najib) (Moha)/, "$2 $1")
(?:x) /(?:.d){2}/ matches but doesn't capture "cdad".

x(?=y) /Moha(?= Najib)/ correspond à “Moha" dans “Moha Najib"


mais pas dans “Moha Brahim" ou “Moha Ali".
/Java(?=Script|Hut)/ corresponfd à "Java" dans "JavaScript"
ou "JavaHut" mais non dans "JavaLand".
x(?!y) /^\d+(?! years)/ correspond à "5" in "5 days" ou "5 mois",
mais non "5 years".
| /forever|young/ correspond à "forever" ou "young“
/(ab)|(cd)|(ef)/ correspond et capture "ab" ou "cd" ou "ef".

42
43
Références arrière
Symbole Description
( )\n "\n" (where n is a number from 1 to 9) when added to the end of a regular
expression pattern allows you to back reference a subpattern within the
pattern, so the value of the subpattern is remembered and used as part of
the matching . A subpattern is created by surrounding it with parenthesis
within the pattern. Think of "\n" as a dynamic variable that is replaced with
the value of the subpattern it references. For example:/(hubba)\1/
is equivalent to the pattern /hubbahubba/, as "\1" is replaced with the
value of the first subpattern within the pattern, or (hubba), to form the
final pattern.
Lets say you want to match any word that occurs twice in a row, such as
"hubba hubba." The expression to use would be:
/(\w+)\s+\1/
"\1" is replaced with the value of the first subpattern's match to essentially
mean "match any word, followed by a space, followed by the same word
again".
If there were more than one set of parentheses in the pattern string you
would use \2 or \3 to match the desired subpattern based on the order of
the left parenthesis for that subpattern. In the example:
/(a (b (c)))/
"\1" references (a (b (c))), "\2" references (b (c)), and "\3" references (c).
44
Method Description Example
[Link](regular Searches and replaces the regular expression var oldstring="(304)434-5454"
expression, replacement portion (match) with the replaced text newstring=[Link](/[\(\)-
text) instead. For the "replacement text" ]/g, "")
parameter, you can use the keywords $1 to //returns "3044345454" (removes
$99 to replace the original text with values "(", ")", and "-")
from subpatterns defined within the main
[Link] following finds the text "John
Doe" and swaps their positions, so it
becomes "Doe John":
var newname="John
Doe".replace(/(John) (Doe)/,
"$2 $1")
The following characters carry special
meaning inside "replacement text":
•$1 to $99: References the submatched
substrings inside parenthesized expressions
within the regular expression. With it you can
capture the result of a match and use it
within the replacement text.
•$&: References the entire substring that
matched the regular expression
•$`: References the text that proceeds the
matched substring
•$': References the text that follows the
matched substring
•$$: A literal dollar sign
The "replacement text" parameter can also
be substituted with a callback function
instead. See example below.
45
Méthode Description Example
[Link](regular Executes a search for a var oldstring="Peter has 8
expression) match within a string based dollars and Jane has 15"
on a regular expression. It newstring=[Link]
returns an array of h(/\d+/g)
information or null if no //returns the array
match is [Link]: Also ["8","15"]
updates the $1…$9
properties in the RegExp
object.
[Link](string) Similar to [Link]() var match =
above in that it returns an /s(amp)le/[Link]("Sample
array of information or null text")
if no match is found. Unlike //returns
[Link]() however, the ["Sample","amp"]
parameter entered should
be a string, not a regular
expression pattern.

46
Method Description
[Link] (string literal or Breaks up a string into an array of substrings
regular expression) based on a regular expression or fixed string.
[Link](regular Tests for a match in a string. It returns the index
expression) of the match, or -1 if not found. Does NOT
support global searches (ie: "g" flag not
supported).
[Link](string) Tests if the given string matches the Regexp,
and returns true if matching, false if not.

47
Method Example
[Link](regular expression) var oldstring="Peter has 8 dollars and Jane has 15"
newstring=[Link](/\d+/g)
//returns the array ["8","15"]
[Link](string) var match = /s(amp)le/[Link]("Sample text")
//returns ["Sample","amp"]
[Link](regular expression, var oldstring="(304)434-5454"
replacement text) newstring=[Link](/[\(\)-]/g, "")
//returns "3044345454" (removes "(", ")", and "-")
[Link] (string literal or regular var oldstring="1,2, 3, 4, 5"
expression) newstring=[Link](/\s*,\s*/)
//returns the array ["1","2","3","4","5"]
[Link](regular expression) "Amy and George".search(/george/i)
//returns 8
[Link](string) var pattern=/george/i
[Link]("Amy and George")
//retuns true

48
Example- Replace "<", ">", "&" and quotes (" and ') with the equivalent HTML entity
instead
function html2entities(sometext){
var re=/[(<>"'&]/g
arguments[i].value=[Link](re, function(m){return
replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}

html2entities([Link]) //replace "<", ">",


"&" and quotes in a form field with corresponding HTML entity
instead

49

Vous aimerez peut-être aussi