Qu'est-ce qu'une expression régulière?
Les expressions régulières sont issues du monde Unix.
Elles permettent d'effectuer des traitements complexes sur des chaines de caractères:
Recherche de sous-chaines.
Substitution et remplacement d'une chaine par une autre.
Découpage complexe de chaines de caractères.
Comment fonctionnent-elles?
Les expressions régulières fonctionnent selon un modèle que l'on défini auparavant et que l'on applique à une chaine de caractères.
La syntaxe
Les expressions régulières peuvent prendre deux types de syntaxes qui sont équivalentes:
Première notation: var reg = /modèle/option ;
Seconde notation: var reg = new RegExp ( "modèle", "option" ) ;
Voici une liste des éléments permettant de créer des modèles pour vos expressions régulières:
Les caractères spéciaux
| QUOTE |
|
[img]http://dream.media-box.net/imgtut/JavaScript/regExpSpecialChars.gif[/img]
|
Les classes de caractères
| QUOTE |
|
[img]http://dream.media-box.net/imgtut/JavaScript/regExpClassChars.gif[/img]
|
La gestion des occurences
| QUOTE |
|
[img]http://dream.media-box.net/imgtut/JavaScript/regExpOccNumber.gif[/img]
|
La gestion de la position
| QUOTE |
|
[img]http://dream.media-box.net/imgtut/JavaScript/regExpGestionPos.gif[/img]
|
Voici une liste des options à appliquer à vos modèles:
\"\": rien du tout, aucune option n'est appliquée.
g: effectue un recherche globale sur toute la chaine de caractères.
i: n'est pas sensible à la casse, c'est à dire qu'il n'y a pas de distinction majuscules/minuscules.
gi c'est à dire que la recherche s'effectue sur toute la chaine, sans distinction majuscules/minuscules.
Voici une liste des méthodes à appliquer à vos expressions régulières
exec(): cette méthode renvoie un tableau contenant toutes les correspondances à l'expression régulière.
match(regExp) .
replace(regExp, chaine) .
search(regExp) .
split(regExp) .
test(regExp) .
Voyons maintenant quelques exemples afin de comprendre l'utilisation de ces méthodes:
Utilisation des méthodes match(regExp) et split(regExp)
Nous allons extraire les pseudos des modérateurs de ce forum:
Tout d'abord le HTML:
| QUOTE |
|
<form>
Voici les pseudos des modérateurs de dreamweaver-forum:<br>
<textarea name=\"aireDeTexte\" cols=\"75\" rows=\"7\">boichu, chipaldance, egraphiste, ekameleon, gto, piloue, qwix, yeca </textarea>
<br>
<br>
<br>
<input type=\"button\" value=\"Extraire avec split()\" onClick=\"extraitPseudoAvecSplit( this.form.aireDeTexte.value )\">
<input type=\"button\" value=\"Extraire avec match()\" onClick=\"extraitPseudoAvecMatch( this.form.aireDeTexte.value )\">
</form>
|
Dans cette aire de texte(textarea) nous avons saisi les pseudos des modérateurs du forum. Il n'y a donc rien de très compliqué 
Maintenant le JavaScript:
La fonction extraitPseudoAvecSplit(texte) :
| CODE |
|
function extraitPseudoAvecSplit ( texte )
{
var maReg = new RegExp( "[, ]", "g" );
var resultat = texte.split( maReg );
if ( resultat )
{
var chaine="";
for ( i=0; i<resultat.length; i++ )
var chaine = chaine + resultat[i] + "\n";
alert ( "Voici la liste ( extraite avec la méthode split(regExp) ) de modérateurs de dreamweaver-forum: \n" + chaine );
}
else
alert ( "L'expression est mauvaise" );
}
|
Cette fonction admet un paramètre texte
Voyons comment est construite cette expression:
var maReg = new RegExp( \"[, ]\", \"g\" ) ;:
Nous créons donc une expression régulière appelée maReg.
Cela signifie que nous recherchons toute chaine de caractères comprise entre le séparateur , (virgule + espace) et que le traitement devra s'effectuer sur la totalité de la chaine spécifiée en paramètre.
Ainsi split(regExp) nous retournera un tableau appelé resultat contenant toutes les occurences comprises entre ce séparateur, dans notre cas le tableau contiendra les pseudos
des modérateurs.Tableau qu'il nous suffit d'afficher ensuite.
La fonction extraitPseudoAvecMatch(texte) :
| CODE |
|
function extraitPseudoAvecMatch ( texte )
{
var maReg = new RegExp( "\\w+", "gi" );
var resultat = texte.match( maReg );
if ( resultat )
{
var chaine ="";
for ( i=0; i<resultat.length; i++ )
var chaine = chaine + resultat[i] + "\n";
alert ( "Voici la liste ( extraite avec la méthode match(regExp) ) de modérateurs de dreamweaver-forum: \n" + chaine );
}
else
alert ( "L'expression est mauvaise" );
}
|
Cette fonction admet un paramètre texte
Voyons comment est construite cette expression:
var maReg = new RegExp( \"\\w+\", \"gi\" ) ;:
Nous créons donc une expression régulière appelée maReg.
Cela signifie que nous devrons chercher une chaine composée de caractères plus underscore: \w.
La recherche devra s'effectuer sur la totalité de la chaine et ne sera pas sensible à la casse: gi.
Ainsi match(regExp) nous retournera un tableau appelé resultat contenant toutes les occurences, trouvées, dans notre cas le tableau contiendra les pseudos des odérateurs.Tableau qu'il nous suffit d'afficher ensuite.
:!:Remarquez le \ serait considéré comme un caractère spécial, ce que nous ne voulons pas
img:remarque Le modèle équivalent à \\w+ .
C'est quand même moins compréhensible non ?
Utilisation des méthodes search(regExp) et replace(regExp, chaine)
Nous allons créer un script de 'rechercher/remplacer':
Tout d'abord le HTML:
| QUOTE |
|
<form>
<textarea name=\"aireDeTexte\" cols=\"75\" rows=\"7\">Saisissez ici votre texte</textarea>
<br><br>
Rechercher :
<input type=\"text\" name=\"motAChercher\">
<br><br>
Remplacer par:
<input type=\"text\" name=\"motDeRemplacement\">
<br><br>
<input type=\"button\" value=\"Rechercher / Remplacer\" onClick=\"chercheRemplace( this.form.aireDeTexte.value, this.form.motAChercher.value, this.form.motDeRemplacement.value, this.form.aireDeTexte )\">
</form>
|
Nous avons une aire de texte(textarea) dans laquelle nous pouvons saisir notre texte et ensuite dans les deux champs définir quel mot on veut remplacer, et par quoi.
Maintenant le JavaScript:
| CODE |
|
function chercheRemplace( text, stringToFind, stringRemplacement, champDeSortie )
{
var text = text.toString();
var maReg = new RegExp( stringToFind, "gi");
var resultat = text.replace( maReg, stringRemplacement );
if ( text.search( maReg ) == -1 )
alert ( "Désolé le mot " + stringToFind.toUpperCase(stringToFind) + " n\'pas été trouvé" );
else
champDeSortie.value = resultat;
}
|
Cette fonction admet quatre paramètres text, stringToFind, stringRemplacement, champDeSortie dont je pense qu'il est inutile d'expliquer leur fonction , en effet leurs noms sont assez expplicites .
Nous avons l'expression régulière suivante: var maReg = new RegExp( stringToFind, \"gi\") ; ce qui signifie que la chaine à rechercher dans le texte a la valeur du paramètre spécifié, et que le traitement s'effectuera sur la totalité de la chaine sans sensibilité à la casse.
Dans notre variable resultat au texte et remplaçons toutes les occurences par la chaine spécifiée en paramètre.
Si le mot recherché dans le texte n'est pas présent: text.search( maReg ) == -1 on affiche un message d'erreur, sinon on affiche le résultat dans le champ spécifié en paramètre.
Traitement d'une adresse email grâce aux expressions régulières
Tout d'abord le HTML:
| QUOTE |
|
<form>
Entrez une adresse email SVP <input type=\"text\" name=\"mail\">
<br>
<br>
<input type=\"button\" value=\"Vérifier l'adresse email\" onClick=\"verifMail( this.form.mail.value )\">
</form>
|
Maintenant le JavaScript:
| CODE |
|
function verifMail( email )
{
var maReg = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" );
if ( email.search( maReg ) == -1 )
alert ( "l\'email est faux" );
else
alert( "l\'email est correct" );
}
|
Explication du modèle:
^: début de la chaine, dans notre cas c'est la début de l'email.
\\w: un caractère au début de cet email.
[\\w+\.\-]*: autant de caractères que l'on veut après, plus point et tiret.
@:un arobase
[\\w\-]: au moins un caractère, plus tiret.
\.: un point
\\w: un caractère après le point
[\\w+\.\-]*: autant de caractères que l'on veut après, plus point et tiret.
\\w: un caractère après.
$: fin de l'email.
img:coupe img:remarque A voir également :img:coupe
Pour toute question concernant ce tutorial merci d'utiliser les salles du forum.
