Guide JavaScript 1.5:Travailler avec les expressions rationnelles:Exemples d'expressions rationnelles
Un article de MDC.
[modifier] Exemples
Les exemples suivants montrent comment utiliser une expression rationnelle.
[modifier] Modifier l'ordre dans une chaîne entrante
L'exemple ci-dessous illustre la formation d'expressions rationnelles et l'utilisation de string.split() et de string.replace(). Il reformate une chaîne contenant des noms (prénoms d'abord) séparés par des espaces et/ou des tabulations et exactement un point-virgule. Puis il inverse l'ordre des noms (nom de famille d'abord) et trie la liste.
<script type="text/javascript">
// La liste des noms contient des noms tous séparés par des points virgules
// mais peut contenir plusieurs espaces et tabulations
var names = "Jean Dupond ;Fred Dubois; Matthieu Dubuisson ; Jacques chailloux ; Marc Raquin ";
var output = new Array(
"---------- Chaîne d'origine<br><br>",
names + "<br><br>");
// Prépare deux expressions rationnelles ainsi que le tableau de valeurs.
// Divise la chaîne en un tableau.
// masque : espaces possibles + point-virgule + espaces possibles
var pattern = /\s*;\s*/;
// Divise les noms à l'aide du masque ci-dessous
// et récupère les morceaux dans un tableau appelé nameList
var nameList = names.split(pattern);
// second masque : un ou plusieurs caractères + espace + un ou plusieurs caractères
// utilise les parenthèses pour conserver les captures
// les parties capturées sont récupérées plus tard.
var pattern = /(\w+)\s+(\w+)/;
// nouveau tableau pour l'analyse des noms
var bySurnameList = new Array();
// Affiche le tableau des noms et le remplit
// avec des noms séparés par des virgules
//
// la méthode replace enlève toutes les captures
// et les remplace par une chaîne en mémoire
// ici, seconde capture puis virgule puis espace puis première capture
//
// Les variables $1 et $2 réfèrent aux captures 1 et 2
// trouvées lors de l'analyse du dernier masque
output.push("---------- Après séparation<br>");
var i, len;
for (i = 0, len = nameList.length; i < len; i++)
{
output.push(nameList[i] + "<br>");
bySurnameList[i] = nameList[i].replace(pattern, "$2, $1")
}
// Affiche le nouveau tableau.
output.push("---------- Noms inversés<br>");
for (i = 0, len = bySurnameList.length; i < len; i++)
{
output.push(bySurnameList[i] + "<br>")
}
// Trie par nom de famille et affiche le résultat
bySurnameList.sort();
output.push("---------- Triés<br>");
for (i = 0, len = bySurnameList.length; i < len; i++)
{
output.push(bySurnameList[i] + "<br>")
}
output.push("---------- Fin<br>");
document.write(output.join("\n"));
</script>
[modifier] Utilisation de caractères spéciaux pour vérifier une entrée
Dans cet exemple, l'utilisateur entre un numéro de téléphone. Quand il appuie sur Entrée, le script vérifie la validité du numéro. S'il est valide (s'il est capturé par l'expression rationnelle), le script affiche une fenêtre de confirmation. S'il n'est pas valide, le script affiche une fenêtre avertissant que le numéro n'est pas valide.
L'expression rationnelle recherche zéro ou une parenthèse d'ouverture \(? ), suivie de trois nombres \d{3}, suivis de zéro ou une parenthèse de fermeture \)?, suivie d'un tiret, d'une barre oblique (slash) ou d'un point, conserve le caractère ([-\/\.]), suivi de trois chiffres \d{3}, suivi d'un second caractère de séparation identique au premier \1, suivi de quatre chiffres \d{4}.
L'événement Change, activé quand l'utilisateur appuie sur entrée, initialise la valeur de RegExp.input.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
function testInfo(phoneInput)
{
var OK = re.exec(phoneInput.value);
if (!OK)
{
window.alert(RegExp.input + " n'est pas un numéro de téléphone valide !");
}
else
{
window.alert("Merci, votre numéro de téléphone est " + OK[0]);
}
}
</script>
</head>
<body>
<p>Entrez votre numéro de téléphone (ainsi que votre code régional) et appuyez sur Entrée.</p>
<form action="">
<input name="phone" onchange="testInfo(this);">
</form>
</body>
</html>