Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LES QUANTIFIEURS ET LES OPTIONS DES REGEX

Présentation des quantifieurs

Les quantifieurs vont être des signes qui vont généralement nous permettre de définir une « quantité » d’une certaine séquence à rechercher.

Par exemple, le quantifieur + indique que l’on recherche au moins une occurrence d’une certaine séquence.

Regardez plutôt l’exemple suivant pour commencer à vous familiariser avec les quantifieurs :

Utilisation du quantifieur « + » en JavaScript dans nos regex

Le quantifieur « + » nous permet de rechercher au moins une fois un caractère

Essayer ce code !

Les quantifieurs vont se placer juste avant ou juste après le caractère ou la séquence auxquels ils doivent être appliqués (cela va dépendre du quantifieur en soi).

Par exemple, le quantifieur + doit être placé juste après le caractère / la séquence sur lesquels il doit agir.

Dans l’exemple ci-dessus, notre quantifieur va donc s’appliquer seulement au « 0 ». On va donc rechercher avec match() un « 1 » suivi d’au moins un « 0 ».

On fait une recherche globale pour obtenir tous les résultats disponibles. On obtient donc 10 et 100.

Liste des quantifieurs disponibles

Voici ci-dessous la liste des quantifieurs que l’on va pouvoir utiliser. Les lettres « a » et « b » ne sont là que pour servir d’exemple, on les remplacera par les chaînes en question.

QUANTIFIEUR SENS
a ? On veut 0 ou 1 « a »
a+ On veut au moins un « a »
n* On veut 0, 1 ou plusieurs « a »
^a On veut un « a » en début de chaîne
a$ On veut un « a » en fin de chaîne
a{X} On veut une séquence de X « a »
a{X,Y} On veut une séquence de X à Y fois « a »
a{X,} On veut une séquence d’au moins X fois « a »
a(?=b) On veut un « a » suivi d’un « b »
a(?!b) On veut un « a » non suivi d’un « b »

Exemples d’utilisation des quantifieurs

Afin de bien clarifier le rôle et l’utilisation des quantifieurs, nous allons nous entraîner avec plusieurs d’entre eux.

Utilisation des quantifieurs avec nos regex en JavaScript

On utilise les quantifieurs pour chercher une certaine quantité d’un caractère ou d’une séquence

Essayer ce code !

Dans notre première regex, on va rechercher la présence d’un ou plusieurs « x » dans notre chaîne de caractères.

Dans notre deuxième regex, on recherche un « e » suivi soit de zéro occurrence de « nd », soit d’une occurrence de « nd ». Notez qu’on utilise les parenthèses pour appliquer le quantifieur ? sur la séquence « nd ».

Dans notre troisième regex, on performe une recherche insensible à la casse. On va rechercher si notre chaîne de caractères finit par un « e ». Ce n’est pas le cas car elle finit par un « t ».

Dans notre quatrième regex, on recherche deux « p » à la suite dans notre chaîne.

Notre cinquième et dernière regex est un peu plus compliquée : on va chercher s’il existe une séquence « Java » suivie par une autre séquence « Script » dans notre chaîne de caractères. Notez qu’avec ce quantifieur nous n’avons pas besoin d’entourer « Java » par des parenthèses : tout ce qu’on va placer avant le quantifieur va servir de première séquence (faites dont bien attention !).

Ces premiers exemples sont assez simples : ils ont été conçus simplement pour vous familiariser avec les quantifieurs.

Pas d’inquiétude cependant : nous allons réutiliser souvent les quantifieurs et aurons donc le loisir de les revoir dans différentes situations.

Les options ou modificateurs

Les options, qu’on appelle également modificateurs, vont servir à ajouter des options à notre recherche.

Les options vont être représentées par des lettres qu’on va écrire après le deuxième caractère d’encadrement de notre regex.

Il existe trois options : l’option i, l’option g et l’option m.

L’option i nous permet de ne pas tenir compte de la casse dans notre regex, ou plutôt d’accepter toutes les combinaisons minuscules / majuscules représentant la séquence de notre regex.

L’option g sert à exécuter des recherches globales : plutôt que de s’arrêter au premier résultat trouvé, on va chercher tous les résultats disponibles.

L’option m, finalement, va nous permettre d’effectuer notre recherche sur plusieurs lignes.

Plus précisément, l'option m va considérer chaque retour à la ligne comme la fin d’une première ligne et le début d’une deuxième ligne.

Nous allons donc généralement utiliser l’option m avec les quantifieurs ^ et $ qui vont alors considérer chaque retour à la ligne comme la fin d’une première chaîne et le début d’une autre.

Voyons immédiatement un exemple utilisant les différentes options :

Utilisation des options de nos regex en JavaScript

On utilise les options des regex en JavaScript pour ajouter des options à nos expressions régulières

Essayer ce code !

Vous ne devriez pas avoir de problème normalement à comprendre les deux premiers résultats, sachant que l’on sait comment fonctionnent les options i et g.

Notez que l’on utilise la chaîne de caractères contenue dans rec2 pour arriver aux deux derniers résultats. En effet, le retour à la ligne doit pouvoir être interprétable par le JavaScript (avec le \n donc) afin que celui-ci puisse l’identifier.

On voit bien que dans notre troisième regex, on ne trouve pas de « d » en début de chaîne. Ensuite, l’utilisation de l’option m va nous permettre de rechercher un « d » à chaque début de ligne effectivement créée.

Chapitre précédent

Chapitre suivant