• Astuces HTML • Expressions régulières •

Description

Les Regex permettent de contrôler le formatage d'une chaîne de caractères.

Les Regex sont utilisées pour trois types d'action :

  • Vérifier la syntaxe d'une chaîne de caractères (par exemple : une adresse ip ou une adresse e-mail),
  • Remplacer tout ou partie de la chaîne de caractères par une autre chaine,
  • Découper une chaîne de caractères.

Il est important de noter que les expressions régulières sont aussi appellées expressions rationnelles et plus communémant Regex ou Regexp que nous utiliserons dans la suite de cette astuce.


Déclaration d'un RegExp

Un RegExp est composé d'un motif qui représente l'expression elle-même, ainsi que d'un drapeau [optionnel] qui permet de préciser son comportement.

var Expression = new RegExp("motif","[drapeau]");
OU
var Expression = /motif/[drapeau];


Valeur du drapeau [optionnel]
Valeur Effet
g permet de rechercher globalement toutes les occurences qui correspondent au motif
i permet de faire une recherche insensible à la casse, c'est-à-dire qu'on ne prend pas en compte l'écriture en majuscule ou minuscule de la chaîne
gi combine les deux drapeaux précédents

Valeur du motif
Début et fin de chaîne

Les symboles "^" et "$" indiquent respectivement le début et la fin d'une chaîne, et permettent donc de la délimiter.

Symbole Motif Résultat Exemple
^ "^a" chaîne qui commence par "a" "a" ⇨ true
"abc" ⇨ true
"cba" ⇨ false
$ "a$" chaîne qui se termine par "a" "a" ⇨ true
"cba" ⇨ true
"abc" ⇨ false
^ ... $ "^a$" chaîne qui commence et se termine par "a" "a" ⇨ true
"aba" ⇨ true
"abc" ⇨ false
... "a" chaîne contenant la chaîne "a" "a" ⇨ true
"bab" ⇨ true
"bcd" ⇨ false

Nombre d'occurences

Les symboles "*", "+" et "?", signifient respectivement "zéro ou plusieurs", "au moins un", "un ou aucun", et permettent de donner une notion de quantité.

Symbole Motif Résultat Exemple
* "abc*" chaîne qui contient "ab" immédiatement suivie de zéro ou plusieurs "c" "abd" ⇨ true
"abccd" ⇨ true
"abdc" ⇨ false
+ "abc+" chaîne qui contient "ab" immédiatement suivie de un ou plusieurs "c" "abcd" ⇨ true
"abccd" ⇨ true
"abd" ⇨ false
? "abc?" chaîne qui contient "ab" immédiatement suivie de zéro ou un "c" "abd" ⇨ true
"abcd" ⇨ true
"abccd" ⇨ false
^ ... + "^abc+" chaîne commençant par "ab" immédiatement suivie de un ou plusieurs "c" "abcd" ⇨ true
"abccd" ⇨ true
"abdc" ⇨ false
"dabc" ⇨ false

Les accolades "{" et "}" permettent de préciser le nombre d'occurences.

Symbole Motif Résultat Exemple
{X} "abc{X}d" chaîne qui contient "ab" suivie immédiatement de X "c" X = 2 (pour l'exemple)
"abccd" ⇨ true
"abcccd" ⇨ false
{X,} "abc{X,}d" chaîne qui contient "ab" suivie immédiatement de X "c" ou plus X = 2 (pour l'exemple)
"abccd" ⇨ true
"abcccd" ⇨ true
"abcdc" ⇨ false
{X,Y} "abc{X,Y}d" chaîne qui contient "ab" suivie immédiatement de X à Y "c" X = 2 et Y = 4 (pour l'exemple)
"abccd" ⇨ true
"abccccd" ⇨ true
"abcd" ⇨ false
"abcccccd" ⇨ false

Nous pouvons maintenant écrire les équivalences suivantes :
  • * <=> {0,}
  • + <=> {1,}
  • ? <=> {0,1}

Parenthèses capturantes

Les parenthèses "(" et ")" permettent de définir une séquence de caractères. Il est possible de récupérer les occurences correspondant au motif entre parenthèses en utilisant la méthode exec() de l'objet RegExp ou les méthodes search(), match() et replace() de l'objet String.

Dans ce cas vous noterez que la barre verticale "|" se comporte en tant qu'opérateur OU.

Symbole Motif Résultat Exemple
( ... ) "a(bc)+" chaîne qui contient "a" suivie de au moins une occurence de la chaîne "bc" "abc" ⇨ true
"dabcbcd" ⇨ true
"abdc" ⇨ false
( ... | ... ) "(ab|cd)" chaîne qui contient "ab" ou "cd" "ab" ⇨ true
"abecd" ⇨ true
"bc" ⇨ false
Vous pouvez constater que l'opération ET se passe d'opérateur.

Caractère quelconque

Le point "." représente une occurence de n'importe quel caractère. Cela peut permettre, par exemple de s'assurer de la longueur d'une chaine.

Symbole Motif Résultat Exemple
. "^.{X}$" chaîne qui contient X caractères quelconques X = 3 (pour l'exemple)
"a1!" ⇨ true
"a1" ⇨ true
"a1b2" ⇨ false
.* ".*" Tous les caractères "a" ⇨ true
"1a2b!" ⇨ true

Listes de caractères

Les crochets "[" et "]" définissent une liste de caractères.

Le signe moins "-" permet de définir un intervalle.

Le caractère "^" indique une interdiction.

Symbole Motif Résultat Exemple
[ ... ] "[abc]" chaîne qui contient un "a", un "b", ou un "c" "a" ⇨ true
"abcdcba" ⇨ true
"def" ⇨ false
[ ... - ... ] "[a-z]" chaîne qui contient un caractère compris entre "a" et "z" "a" ⇨ true
"1m" ⇨ true
"1" ⇨ false
[ ... - ... ] "[A-G]" chaîne qui contient un caractère compris entre "A" et "G" "A" ⇨ true
"1B" ⇨ true
"1M" ⇨ false
[^ ... - ... ] "[^a-zA-Z]" chaîne qui ne contient pas de lettre "1" ⇨ true
"1m" ⇨ false
^[^ ... - ... ] "^[^a-zA-Z]" chaîne qui ne commence pas par des lettres "1" ⇨ true
"/m" ⇨ true
"m1" ⇨ false

ATTENTION : Entre crochet, chaque caractère est représenté par sa valeur.
  • Pour représenter le crochet fermant "]" dans le motif, il faut le placer en premier ou après un ^ si c'est une interdiction.
  • Pour représenter le crochet ouvrant "[" dans le motif, il faut le placer en dernier ou juste avant le "]" s'il fait partie du motif.
  • Pour représenter le signe "-" dans le motif, il est nécessaire de commencer ou de terminer par lui.
Symbole Motif Résultat Exemple
[] ... ] "[]a]" chaîne qui contient un "]" ou "a" "]]" ⇨ true
"[abcd]" ⇨ true
"bc" ⇨ false
[ ... [] "[abc[]" chaîne qui contient un "[" ou "a" "[[" ⇨ true
"[abcd]" ⇨ true
"bc" ⇨ false
[^[] ... ] "[^[]a]" chaîne qui ne contient pas de "[", de "]" et de "a" "bcd" ⇨ true
"[" ⇨ false
"[abcd]" ⇨ false
[-[] ... ] "[-[]a]" chaîne qui contient un "-", un "[", un "]" ou un "a" "[[" ⇨ true
"[-1]" ⇨ true
"bc" ⇨ false
[ ... ] "[\+?{}.]" chaîne qui contient un ou plusieurs de ces six caractères "." ⇨ true
"\\local\test.exe" ⇨ true
"abc" ⇨ false

Caractères spéciaux

Pour rechercher un caractère spécial, il suffit de le faire précéder d'un antislash "\", sauf dans le cas d'un ensemble de caractères entre crochets.

Caractère spécial Echappement
\ \\
. \.
$ \$
[ \[
] \]
( \(
) \)
{ \{
} \}
^ \^
? \?
* \*
+ \+
- \-
Alias

Il existe enfin des alias qui permettent de simplifier les écritures de RegExp et de capturer certain carcères de mise en page.

Symbole Motif Résultat Exemple
\b ... "\bWeb" Permet de capturer une chaine de carctère, situés en début de mot "WebMasterHelp" ⇨ true
"Help Master Web" ⇨ true
"HelpMasterWeb" ⇨ false
... \b "\bHelp" Permet de capturer une chaine de carctère, situés en fin de mot "WebMasterHelp" ⇨ true
"Help Master Web" ⇨ true
"HelpMasterWeb" ⇨ false
... \B "Master\B" Permet de capturer une chaine de carctère non précédés ou suivis d'une coupure de mot, c'est-à-dire situés au milieu d'un mot "WebMasterHelp" ⇨ true
"Web Master Help" ⇨ false
\c ... "\cV" Permet de capturer le caractère de contrôle (combinaison de touches Ctrl + V qui correspond à l'action "coller")
\d "\d" Permet de capturer un caractère numérique
\d <=> [0-9]		 "1" ⇨ true
"a" ⇨ false
\f "\f" Permet de capturer un saut de page
\n "\n" Permet de capturer un saut de ligne
\r "\r" Permet de capturer un retour chariot
\s "\s" Permet de capturer un "caractère blanc" (espace, retour chariot, tabulation, saut de ligne, saut de page)
\s <=> [\f\n\r\t\v]
\S "\S" Permet de capturer un "caractère non blanc"
\S <=> [^\f\n\r\t\v]
\t "\t" Permet de capturer une tabulation horizontale
\v "\v" Permet de capturer une tabulation verticale
\w "\w" Permet de capturer un caractère alphanumérique, y compris le caractère underscore "_"
\w <=> [a-zA-Z0-9_]		 "a" ⇨ true
"^_^" ⇨ true
"!?!" ⇨ false
\W "\W" Permet de capturer un caractère non alphanumérique
\W <=> [^a-zA-Z0-9_]		 "!" ⇨ true
"_" ⇨ false
"abc123" ⇨ false
\oX "\o001" Permet de capturer un nombre en base octale (base 8)
\xX "\x41" Permet de capturer un nombre en base hexadécimale (base 16)
Fonctions
Test

La fonction "test" permet de tester si une chaine de caractère respecte le motif d'un RegExp.


Replace

La fonction "replace" permet de remplacer une chaine de caractère défini par le motif d'un RegExp dans une chaine de caractère.


Exemple

Dans cet exemple nous allons utiliser les RegExp pour tester le contenu d'un input et supprimer les carctères indésirables en temps réel.


Code JavaScript

function VerifNum(chmp,autorise)
{
var numTest = new RegExp("^["+autorise+"]+$");
var txtTest = new RegExp("[^"+autorise+"]");

var id = document.getElementById(chmp);
var valeur = id.value;

while(numTest.test(valeur) == false && valeur != "")
{
valeur = valeur.replace(txtTest,"");
}
id.value = valeur;
}

Code HTML

<form>
EAN : <input type="text" name="ean" id="ean" size="14" maxlength="14" onkeyup="VerifNum('ean','-0-9')">
</form>

Résultat

Saisissez le code EAN de votre livre :

Important : Seul les chiffres et des moins seront acceptés !