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.

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.

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:

””: 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: cumul des options g et i c'est à dire que la recherche s'effectue sur toute la chaine, sans distinction majuscules/minuscules.

exec(): cette méthode renvoie un tableau contenant toutes les correspondances à l'expression régulière.
match(regExp): cette méthode applique une expression régulière sur une chaine, et renvoie un tableau contenant tout les résultats. Elle s'utilise comme ceci: chaine.match(regExp) .
replace(regExp, chaine):cette méthode remplace par la chaine spécifiée en paramètre, toute correspondance entre une chaine et l'expression régulière qui lui est appliquée. Elle s'utilise comme ceci: chaine.replace(regExp, chaineDeRemplacement ) .
search(regExp):cette méthode regarde s'il existe une correspondace entre le chaine et l'expression régulière qui lui est appliquée. Si aucune correspondance n'est trouvée, la méthode renvoie -1 .
split(regExp):cette méthode retourne sous forme de tableau toutes les correspondances trouvées entre le séparateur défini dans le modèle. Elle s'utilise comme ceci: chaine.split(regExp) .
test(regExp):cette méthode regarde s'il existe une correspondance entre une chaine et l'expression régulière qui lui est appliquée. Si une correspondance existe, la méthode retourne true sinon elle retourne false. Elle s'utilise comme ceci: chaine.test(regExp) .

Utilisation des méthodes match(regExp) et split(regExp)

Tout d'abord le HTML:

<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>
<code html>
 
 
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 javascript>
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 auquel nous allons appliquer l'expression régulière maReg
Voyons comment est construite cette expression:
var maReg = new RegExp( ”[, ]”, “g” ) ;:
Nous créons donc une expression régulière appelée maReg qui a comme modèle [, ] et comme option g.
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) :

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 auquel nous allons appliquer l'expression régulière maReg
Voyons comment est construite cette expression:
var maReg = new RegExp( “\\w+”, “gi” ) ;:
Nous créons donc une expression régulière appelée maReg qui a comme modèle \\w+ et comme option gi.
Cela signifie que nous devrons chercher une chaine composée de caractères plus underscore: \w, et que cette chaine doit apparaitre au moins un fois: +.
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 \ devant \w, nous sommes obligés de le spécifier car sinon w serait considéré comme un caractère spécial, ce que nous ne voulons pas

Le modèle équivalent à \\w+ est +, maReg vaudrait donc: var maReg = new RegExp( ”+”, “gi” ) ; .
C'est quand même moins compréhensible non ?

Utilisation des méthodes search(regExp) et replace(regExp, chaine)

Tout d'abord le HTML:

<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:

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 nous appliquons maReg 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:

<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:

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:

\\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.

Tutorial de qwix