Objet RegExp de Javascript

.....

Objet RegExp de Javascript

JavaScript cours tutorial

RegExp, est abréviation l'expression régulière.
Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons de caractère dans les chaînes de caractères.

Qu’est ce que RegExp ?

Une expression régulière est un objet qui décrit un modèle de chaîne de caractères.
Quand vous recherchez dans un texte, vous pouvez employer un modèle pour décrire ce que vous recherchez.
Un modèle simple peut être un caractère simple.
Un modèle plus compliqué peut se composer de plus de caractères, et peut être employé pour l'analyser, vérifier le format, substitution de caractéres et plus.
Les expressions régulières sont utilisées pour effectuer de puissantes fonctions de recherches et de remplacements sur le texte.
Syntaxe

var txt=new RegExp(modele,modifier);

ou simplement:

var txt=/modele/modifier;
• le modele spécifie le modèle d'une expression
• le modifier spécifie si une recherche est globale, distinguant majuscules et minuscules, etc.

Modificateurs de RegExp

Des modificateurs sont employés pour exécuter des recherches ne distinguant pas majuscules et minuscules et globales.
Le modificateur I est employé pour effectuer la correspondance ne distinguant pas majuscules et minuscules.
Le modificateur g est employé pour effectuer une correspondance globale (trouvez toutes les correspondances plutôt qu'en s'arrêtant après la première trouvée).

Exemple 1
Faites une recherche ne distinguant pas majuscules et minuscules de « Apprendre-creer-sites » dans une chaîne :

var text="Visitez Apprendre-creer-sites";
var modele1=/ Apprendre-creer-sites /i;

Exemple 2
Faites une recherche globale de « est » :

var text="est ce que tout est là? " ;
var modele1=/est/g ;

Exemple 3
Faites une recherche globale et ne distinguant pas majuscules et minuscules de « est » :

var text="est ce que tout est là? " ;
var modele1=/est/gi ;

La méthode test()

La méthode test() recherche dans une chaîne une valeur spécifique, et renvoie vrai ou faux, selon le résultat.
L'exemple suivant recherche dans une chaîne le caractère « e »
Exemple

var modele1=new RegExp (" e ") ;
document.write (modele1.test (" les meilleures choses dans la vie sont libres "));

Puisqu'il y a un « e » dans la chaîne, le résultat du code ci-dessus sera : true

La méthode exec ()

La méthode exec() recherche dans une chaîne une valeur spécifique, et renvoie le texte de la valeur trouvée. Si aucune correspondance n'est trouvée, elle renvoie nulle.
L'exemple suivant recherche une chaîne le caractère « e » :
Exemple

var modele1=new RegExp (" e ") ;
document.write (modele1.exec (" les meilleures choses dans la vie sont libres "));

Puisqu'il y a un « e » dans la chaîne, le résultat du code ci-dessus sera : e

Forme d’une adresse email

Voici un exemple plus concret. Dans cet exemple nous allons tester si la forme l’adresse email saisie par l’utilisateur sur le formulaire est valide . Exemple Validation de la forme de l’adresse email

Sélectionner le code

<html>
<head>
  <script type="text/javascript">
    function validerAdresse(){
        var email = document.form.email.value;
        var modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i;
        if (modele.test(email))
          alert("Votre adresse email est valide !")
        else
          alert("Votre adresse email est invalide !");
        return false;
    }
  </script>
<body>
    <form name="form">
    <input type="text" name="email" value="adresse@email.com"/>
    <input type="submit" value="Valider" onclick="validerAdresse();">
    </form>
</body>
</html>

 

Explications du code :

Le signe ^ indique que la chaîne doit commencer par ce qui suit, et le signe $ indique qu'elle doit se terminer par ce qui précède.
[a-z0-9\-_\.] veut dire une chaîne de caractère composée de lettres et chiffres, soit les 26 lettres de l'alphabet et les dix chiffres , un tiret, un sous ligné, et le point .
+@ veut dire suivie par le symbole @
+\.[a-z]{2,5} veut dire chaîne composée de 2 à 5 lettres de a à z
le i à la fin pour ne pas distinguer les majiscules
Le modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i veut dire commence par une chaîne qui contient des lettres des chiffres un tiret, un sous ligné, et le point suivie du symbole @ puis un point et une chaîne composée de 2 à 5 lettres de a à z
Avec la méthode test() on teste la variable email si elle est conforme au modèle elle renvoie:
alert("Votre adresse email est valide !")
si non elle renvoie alert("Votre adresse email est invalide !")

Pour rechercher un caractère faisant partie des caractères spéciaux, il suffit de le faire précéder d'un antislash (sauf entre crochets) :

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

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

"fin$": chaîne qui se termine par "fin"

"^chaîne$": chaîne qui commence et se termine par "chaîne"

"abc": chaîne contenant la chaîne "abc"

Les symboles *, + et ?, signifient respectivement "zéro ou plusieurs", "au moins un", "un ou aucun", et permettent de donner une notion de quantité.
"abc+": chaîne qui contient "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)
"abc*": chaîne qui contient "ab" suivie de zéro ou plusieurs "c" ("ab", "abc", etc.)
"abc?": chaîne qui contient "ab" suivie de zéro ou un "c" ("ab" ou "abc" uniquement)
"^abc+": chaîne commençant par "ab" suivie de un ou plusieurs "c" ("abc", "abcc", etc.)
Les accolades {X,Y} permettent de donner des limites précises de nombre d'occurences.
"abc{2}": chaîne qui contient "ab" suivie de deux "c" ("abcc")
"abc{2,}": chaîne qui contient "ab" suivie de deux "c" ou plus ("abcc" etc..)
"abc{2,4}": chaîne qui contient "ab" suivie 2, 3 ou 4 "c" ("abcc" .. "abcccc")
Il est à noter que le premier nombre de la limite est obligatoire ("{0,2}", mais pas "{,2}"). Les symboles vu précedemment ('*', '+', et '?') sont équivalents à "{0,}", "{1,}", et "{0,1}".

Parenthèses capturantes

Les parenthèses ( ) permettent de représenter une séquence de caractères et de capturer le résultat. Les occurences correspondant au motif entre parenthèses sont accessibles via la méthode exec() de l'objet RegExp ou bien les méthodes search(), match() et replace() de l'objet String.
"a(bc)+": chaîne qui contient "a" suivie de au moins une occurence de la chaîne "bc"
La barre verticale | se comporte en tant qu'opérateur OU
"(un|le)": chaîne qui contient "un" ou "le"

Caractère quelconque

Le point (.) indique n'importe une occurence de n'importe quel caractère.
"^.{3}$": chaîne qui contient 3 caractères
".*": Tous les caractères

Liste de caractères

Les crochets [ ] définissent une liste de caractères autorisés (ou interdits). Le signe - permet quand à lui de définir un intervalle. Le caractère ^ après le premier crochet indique quand à lui une interdiction.
"[abc]": chaîne qui contient un "a", un "b", ou un "c".
"[a-z]": chaîne qui contient un caractère compris entre "a" et "z".
"[^a-zA-Z]": chaîne qui ne commence pas par une lettre.
"[-ag]": chaîne qui contient un moins (-), un "a", ou un "g"
"[a-g]": chaîne qui contient un caractère compris entre "a" et "g"
"[\+?{}.]": chaîne qui contient un de ces six caractères
"[]-]": chaîne qui contient le caractère "]" ou le caractère "-"

Caractères spéciaux

Il existe enfin des caractères spéciaux (précédés d'une barre oblique inverse) représentant des types de caractères spécifiques :

Caractère spécial Utilité
\b Permet de capturer une coupure de mot, c'est-à-dire des caractères situés au tout début ou à la fin d'un mot. Par exemple "he\b" permet de capturer "CommentCaMarche" mais pas "chenil". De la même façon "\bCo" permet de capturer "CommentCaMarche" mais pas "DéCor".
\B Permet de capturer les caractères non précédés ou suivis d'une coupure de mot, c'est-à-dire des caractères situés au milieu d'un mot. Par exemple "ment\B" permet de capturer "CommentCaMarche" mais pas "Comment Ca Marche".
\cCaractère Permet de capturer un caractère de contrôle (correspondant à la combinaison Ctrl+Caractère. Par exemple "\cC" permet de capturer la séquence Ctrl+c.
\d Permet de capturer un caractère numérique. \d est ainsi équivalent à [0-9].
\f Permet de capturer un saut de page.
\n Permet de capturer un saut de ligne.
\r Permet de capturer un retour chariot.
\s Permet de capturer un "caractère blanc" (espace, retour chariot, tabulation, saut de ligne, saut de page).
\S Permet de capturer un "caractère non blanc" (tous les caractères sauf espace, retour chariot, tabulation, saut de ligne, saut de page).
\t Permet de capturer une tabulation horizontale.
\v Permet de capturer une tabulation verticale.
\w Permet de capturer un caractère alphanumérique (y compris le caractère _). \w est ainsi équivalent à [a-zA-Z0-9_].
\w Permet de capturer un caractère non alphanumérique. \W est ainsi équivalent à [^a-zA-Z0-9_].
\oNombre Permet de capturer un nombre en base octale (base 8).
\xNombre Permet de capturer un nombre en base hexadécimale (base 16).

Tableau récapitulatif


Voici un tableau récapitulatif des caractères spéciaux utilisés dans les expressions régulières :


Caractère Utilité
\ Le caractère antislash représente lui-même ou le caractère spécial qui le suit.
[] Les crochets définissent une liste de caractères.
() Les parenthèses définissent un élément composé de l'expression régulière qu'elle contient.
{} Les accolades lorsqu'elles contiennent un ou plusieurs chiffres séparés par des virgules représentent le nombre d'occurences de l'élément les précédant (par exemple p{2,5} correspond à ppp, pppp ou ppppp
- Un moins entre deux caractères dans une liste représente un intervalle (par exemple [a-d] représente [abcd]).
. Le caractère point représente un caractère quelconque.
* Le caractère astérisque indique un nombre d'occurences indéterminé (y compris aucune) de l'élément le précédant.
+ Le caractère plus indique une ou plusieurs occurences de l'élément le précédant.
? Le caractère "point d'interrogation" indique une occurence éventuelle (0 ou 1) de l'élément le précédant.
| La barre verticale signifie l'occurrence de l'élément situé à sa gauche ou de celui situé à sa droite (lard|cochon)
^ • Placé en début d'expression il signifie "chaîne commençant par .. "
Utilisé entre crochet, immédiatement après le crochet ouvrant, il signifie "ne contenant pas les caractères suivants...
[abc] Permet de rechercher les caractères compris entre les crochets.
[^abc] Permet de rechercher tous les caractères sauf ceux compris entre les crochets.
$ Placé en fin d'expression il signifie "chaîne finissant par ... "


>Exemple fonction pour remplacer les caractères avec les accents

Sélectionner le code

<script language="JavaScript"><!--
   function sansaccent(chaine) {
      temp = chaine.replace(/[àâä]/gi,"a")
      temp = temp.replace(/[éèêë]/gi,"e")
      temp = temp.replace(/[îï]/gi,"i")
      temp = temp.replace(/[ôö]/gi,"o")
      temp = temp.replace(/[ùûü]/gi,"u")
      return temp
   }
   document.write(sansaccent("l'élément doit être sans accents"))
//--></script>

 



Cours precedent:
cours precedent  Objet math javascript

    Sommaire :
Le langage JavaScript

 Cours suivant:
Objet date javascript    cours suivant

Par carabde 30 mars 2014