Mootools en 30 jours : jour 13 - Expressions régulières

I. Introduction aux expressions régulières

Si vous ne l'avez pas encore fait, je vous suggère de lire les Tutoriels Mootools en 30 jours précédents avant de continuer. Pour le Jour 13, nous allons avoir un bref aperçu des expressions régulières, puis allons voir les fonctionnalités apportées par Mootools pour vous simplifier la vie lorsque vous les utilisez.

Pour ceux de vous qui ne connaissent pas encore bien comment une expression régulière (regex) fonctionne, Je recommande de passer un peu de temps sur les liens placés en référence dans le texte, et particulièrement les liens “Pour en savoir plus” en bas de cette page. Nous allons regarder à quelques utilisations basiques de regexes, mais il y a un nombre incroyable de choses qu'ils peuvent réaliser en plus de ce que nous allons voir aujourd'hui.

II. Explications

Les Bases

test()

Pour aller au plus simple, une expression régulière peut être simplement une chaîne de texte dont vous voulez chercher la correspondance. Alors que le javascript fourni déjà un objet RegExp avec sa propre fonction test(), la fonction test() de Mootools est un peu plus familière et il devient moins compliqué d'utiliser les regex en javascript.

Pour les débutants, voyons une utilisation simple de test(), pour trouver une chaîne dans une chaîne plus large :

//La chaine dans laquelle nous allons chercher une correspondance
var string_to_test = "Match anything in here";
 
//l'expression regulière que nous recherchons
var regular_expression = "anything";
 
//Applique l'expression reguliere, renvoie true ou false
var result = string_to_test.test(regular_expression);
 
//le resultat est vrai (renvoie true)

Vous obtiendrez quasiement le même comportement avec la fonction contains(), mais là où "contains" recherche des mots complets, l'expression régulière cherche toutes les occurences de l'expression régulière. Par exemple, contains() ne retournera pas true dans cet exemple, au contraire de test() :

var string_to_match = "anything";
 
//Retourne False
string_to_match.contains('nything')
 
//Retourne True
string_to_match.test('nything');

Autre chose, sachez que le regex est sensible à la casse, sauf si vous le précisez explicitement de ne pas l'être, donc rechercher le terme “match” alors que la chaîne contient “Match” retournera false. Vous pouvez jouer avec ça ci-dessous :

var regex_demo = function(){
var test_string = $('regex_1_value').get('value');
var regex_value = $('regex_1_match').get('value');
var test_result = test_string.test(regex_value);
 
if (test_result){$('regex_1_result').set('html', "correspondance trouvée");}
else {$('regex_1_result').set('html', "aucune correspondance");}
}

Notez qu'il y a des caractères spéciaux dans les expressions régulières donc il faut faire attention en les utilisant. Si vous mettez un des caractères suivants dans le champ regex, vous pouvez avoir une erreur et devrez recharger cette page pour que la démo fonctionne à nouveau.

- . * + ? ^ $ { } ( ) | [ ] / \
Chaine à tester
 Expression Régulières 
 


Ignorer la Casse

Il y a pas mal de situations dans lesquelles vous n'avez pas besoin d'un terme dont vous essayez de trouver une correspondance soit sensible à la casse . Si vous ne voulez pas qu'une expression régulière soit sensible à la casse, vous pouvez appeler "test" avec le paramètre “i” :

//La chaine dont nous cherchons une correspondance
var string_to_test = "IgNorE CaSe";
 
//retourne false
string_to_test.test("ignore");
 
//retourne true
string_to_test.test("ignore", "i");

Techniquement parlant, vous pouvez passer plusieurs paramètres à "test", mais comme javascript ne supporte actuellement que paramètres en expression régulière (2 de celles-ci sont activées par défaut dans test()), le paramètre “i” est probablement la seule chose que vous aurez besoin de lui passer pour le moment. Vous pouvez tester la différence de casse en jouant avec le formulaire ci-dessous :

var regex_demo = function(){
//Prend la chaine à tester à partir du champ de texte
var test_string = $('regex_2_value').get('value');
 
//Prend l'expression régulière dans le champ de texte
var regex_value = $('regex_2_match').get('value');
 
//Vérifie si nous ignorons la sensibilité à la casse
var regex_param = "";
if ($('regex_2_param').checked){
regex_param = "i";
}
 
//Lance le test et envoie le résultat
var test_result = test_string.test(regex_value, regex_param);
 
//Met à jour le span pour voir le résultat
if (test_result){$('regex_2_result').set('html', "trouvé");}
else {$('regex_2_result').set('html', "pas trouvé");}
}
Chaine à tester
Expression Régulière 
Ignore la casse
 


Les choses amusantes

Maintenant que nous avons vu des correspondances simples, nous pouvons regarder les aspects plus impressionnants de regex. C'est difficile de couvrir toutes les possibilités de regexes, donc nous allons juste voir quelques fonctionnalités qui sont les plus souvent utilisées.

Correspondance du début avec ^

L'opérateur ‘^’ vous permet de rechercher au début d'une ligne, sans regarder si la chaîne que vous recherchez existe plus loin dans la ligne. Placez le avant l'expression que vous recherchez, comme ceci :

//la chaîne que nous allons tester
var string_to_test = "lets match at the beginning"
 
//teste pour voir si la chaine commence par "lets", renvoie true
var is_true = string_to_test.match("^lets");

Comme on peut s'y attendre, si l'expression n'est pas au début de la chaîne, le test retournera false :

//La chaine que nous allons tester
var string_to_test = "lets match at the beginning";
 
//Teste pour voir si la chaine commence avec match, renvoie false
var is_false = string_to_test.match("^match");

Vous pouvez le tester ci-dessous :

Chaine à tester
Expression Régulière 
Ignorer la casse
 


Match at the end with $

L'opérateur ‘$’ fonctionne comme “^” avec deux différences.

  1. Il fait la correspondance avec la fin d'une chaîne au lieu du début.
  2. Il est placé à la fin d'une expression, et non au début.

Autrement, tout fonctionne comme l'on peut s'y attendre :

//La chaîne que nous allons tester
var string_to_test = "lets match at the end";
 
//Teste pour si la chaine se termine par "end", renvoie true
var is_true = string_to_test.match("end$");
 
//Teste pour voir si la chaine se termine par "the"
// renvoie false

var is_false = string_to_test.match("the$");

Une chose intéressante que vous pouvez faire en combinant ces deux opérateurs, c'est tester pour voir si une chaîne contient juste l'expression que vous testez et rien d'autre.

//La chaine que nous allons tester
var string_to_test = "lets match everything";
 
//Teste pour voir si une chaine est précisément
// "lets match everything", renvoie true

var is_true = string_to_test.match("^lets match everything$");
 
//Teste pour voir si une chaine est précisément
// "lets everything", renvoie false

var is_false = string_to_test.match("^lets everything$");
Chaine à tester
Expression régulière
Ignorer la casse
 


Les Classes de caractères

Les classes de caractères forment un autre outil regex qui permet de faire des correspondances sur plusieurs caractères spécifiques (A ou Z), tout comme une rangée de caractères (de A à Z). Si, par exemple, vous voulez tester si l'un des mots moo ou boo existe dans une chaîne, les classes de caractères vous permettent de faire cela en plaçant chacun des caractères entre [crochets] à l'intérieur de l'expression régulière :

//La chaine sur laquelle on va chercher moo
var first_string_to_test = "cows go moo";
 
//La chaine sur laquelle on va chercher boo
var second_string_to_test = "ghosts go boo";
 
//Cela correspond au premier mais pas au second
var returns_true = first_string_to_test.test("moo");
var returns_false = second_string_to_test("moo");
 
//Cela correspond au second mais pas au premier
returns_false = first_string_to_test.test("boo");
returns_true = second_string_to_test.test("boo")
 
//Cela correspond à chacun des deux
returns_true = first_string_to_test("[mb]oo");
returns_true = second_string_to_test("[mb]oo");
Première chaîne à tester
 
Seconde chaîne à tester
 
Expression Régulière
Ignorer la casse
 

Afin de faire correspondre une rangée de caractères, vous séparez le début et la fin de la rangée que vous voulez avec un tiret. Vous pouvez définir une rangée de caractères ou de nombres de la même façon.

var string_to_test = " b or 3";
//Cherche a, b, c, ou d. Renvoie true
string_to_test.test("[a-d]");
 
//Cherche 1, 2, 3, 4, ou 5. Renvoie true.
string_to_test.test("[1-5]");

Si vous voulez rechercher plusieurs classes de caractères, vous insérer vos classes de caractères dans leur propre [crochets] et les séparer avec un opérateur ‘|’ 

var string_to_test = "b or 3";
//Cherche entre a et d ou 1 à 5, renvoie true
string_to_test.test([ [a-d] | [1-5] ]);
Première chaine à tester
 
Seconde chaine à tester
 
Expression Régulière
Ignorer la casse
 


escapeRegExp()

En lisant vous vous êtes peut-être dit que cela allait être compliqué de chercher certains types de caractères ou chaines étant donné la façon dont les expressions régulières fonctionnent. Par exemple, comment faire si vous voulez chercher les termes [stuff-in-here] ou $300 dans une chaîne de caractères? Vous pouvez le faire manuellement en plaçant un caractère ‘\’ (antislash) avant chaque caractères spécial que vous voulez ignorer.

//La chaine dans laquelle nous allons chercher, 
// notez les [ ] - et $

var string_to_match = "[stuff-in-here] or $300";
 
//La manière incorrecte de faire la recherche
string_to_match.test("[stuff-in-here]");
string_to_match.test("$300");
 
//La manière correcte de le faire,
//notez les \ précédants les [ ] - et $
string_to_match.test("\[stuff\-in\-here\]");
string_to_match.test("\$300");

Cela peut vous causer des maux de tête quand vous utilisez les regexes, particulièrement si vous n'êtes pas encore un expert dans celles-ci. Pour information, les caractères spéciaux qui nécessitent un échappement dans les regex sont : 

- . * + ? ^ $ { } ( ) | [ ] / \

Heureusement, Mootools fourni la fonction escapeRegExp(), qui s'assure que vos regexes sont échappées comme il faut. C'est une autre fonction des chaînes, donc vous pouvez l'appeler sur n'importe quelle chaîne dans laquelle vous souhaitez rechercher à l'aide d'une expression régulière.

//La chaîne qu'il faut Echapper
var unescaped_regex_string = "[stuff-in-here]";
 
//Echappe la chaine
var escaped_regex_string = unescaped_regex_string.escapeRegExp();
 
//escaped_regex_string is "\[stuff\-in\-here\]"

Notez que cela signifie que tous les caractères spéciaux que vous voulez utiliser dans votre expression régulière doivent être ajoutés après que la chaîne n'ait été échappée :

//La chaîne qu'il faut Echapper
var unescaped_regex_string = "[stuff-in-here]“;

//Echappe la chaîne, avec correspondance sur le début
var escaped_regex_string = “^” + unescaped_regex_string.escapeRegExp();

//escaped_regex_string donne “^\[stuff\-in\-here\]”

Vous pouvez tester les différences entre l'utilisation de escapeRegExp() ou non grâce à l'exemple ci-dessous : 

var regex_demo = function(){
//Récupère la chaine à tester
var test_string_1 = $('regex_7_value_1').get('value');
 
//Récupère l'expression régulière à utiliser
var regex_value = $('regex_7_match').get('value');
 
//Vérifie si nous devons échapper les regexes
if ($('regex_7_escape').checked){
//Si oui, échappe le regex
regex_value = regex_value.escapeRegExp();
}
 
//Vérifie si cela doit etre sensible à la casse
var regex_param = "";
if ($('regex_7_param').checked){
regex_param = "i";
}
 
//Lance le test
var test_result_1 = test_string_1.test(regex_value, regex_param);
if (test_result_1){$('regex_7_result_1').set('html', "matched");}
else {$('regex_7_result_1').set('html', "didn't match");}
 
}
Chaine à tester  
Expression Régulière 
utiliser escapeRegExp()  
Ignorer la casse
 

Souvenez-vous que vous pouvez casser les demos de cette page en utilisant des caractères spéciaux non échappés, donc ne soyez pas surpris si cela s'arrête de fonctionner après ce genre de test.

III. Conclusion du tutorial

Pour en savoir plus

Télécharger un zip avec tout ce qu'il vous faut pour débuter

Regular-Expressions.info est un bon site (mais en anglais) comme référence pour apprendre, c'est un bon site sur lequel vous pouvez passer un peu de temps. Pour ceux qui maitrisent le Perl ou qui peuvent apprendre sur n'importe quel language, la Section sur les Regexes dans le Tutoriel Perl de Roberts explique très bien les concepts de bases. Dans le même genre, Stephen Ramsay a écrit un tutoriel sur les Regexes Unix qui détaille les concepts de façon très claire et simple.

Un autre bon endroit à voir est la Librarie Regex, ils ont des tonnes d'exemples d'expressions régulières pour faire toutes les tâches standards. Enfin, si vous vous sentez courageux, vous devriez passer du temps sur la Création d'une expression régulière de Mozilla. C'est assez long, mais ça peut être incroyablement utile. Pour des informations là-dessus en ce qui concerne Mootools, lisez la documentation de test()

Tutoriel de demain

Pour le Jour 14 nous verrons les périodes et ferons une introduction aux Hashes avec Mootools 1.2