Expressions régulières en TypeScript avec exemples : en pratique

Expressions régulières en TypeScript : de la théorie à la pratique

Les expressions régulières (regex) sont un outil puissant pour travailler avec les chaînes de caractères. En TypeScript, elles permettent non seulement d'effectuer des recherches, des remplacements et des validations, mais offrent également un typage strict, ce qui réduit le nombre d'erreurs lors de la compilation. Dans cet article, nous allons voir comment utiliser les expressions régulières en TypeScript avec des exemples concrets : de la validation d'email à l'extraction sécurisée de données.

1. Création et typage des expressions régulières

En TypeScript, une expression régulière peut être créée de deux manières : à l'aide d'un littéral ou du constructeur RegExp. La première méthode est préférable car elle est plus courte et ne nécessite pas d'échappement des antislashs.

// Littéral (méthode recommandée)const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;

// Constructeur (utile pour les motifs dynamiques)const pattern: string = 'hello';const dynamicRegex: RegExp = new RegExp(pattern, 'gi');

console.log(emailRegex.test('user@example.com')); // trueconsole.log(dynamicRegex.test('Hello, world!')); // true (le flag i ignore la casse)

Notez l'annotation de type : RegExp. TypeScript déduit automatiquement le type pour les littéraux, mais une indication explicite aide à documenter le code.

2. Flags et leur typage

Les flags modifient le comportement de l'expression régulière. En TypeScript, le type des flags peut être défini via un littéral de chaîne ou une énumération. Voici les flags principaux :

• g — recherche globale (ne s'arrête pas après la première correspondance) ;
• i — mode insensible à la casse ;
• m — mode multiligne (^ et $ fonctionnent pour chaque ligne) ;
• s — le point correspond au caractère de nouvelle ligne ;
• u — prise en charge d'Unicode ;
• y — recherche à partir de la dernière position trouvée (sticky).

// Typage des flags via une chaîneconst regexWithFlags: RegExp = /test/gim;

// Vérification des flagsconsole.log(regexWithFlags.flags); // "gim"console.log(regexWithFlags.global); // trueconsole.log(regexWithFlags.ignoreCase); // trueconsole.log(regexWithFlags.multiline); // true

Pour les flags dynamiques, utilisez le type string, mais il est préférable de le limiter aux valeurs autorisées à l'aide d'une union littérale :

type RegexFlags = 'g' | 'i' | 'm' | 's' | 'u' | 'y';const flags: RegexFlags = 'gi'; // Erreur : 'gi' n'est pas un flag individuel// Correct : passer une chaîneconst dynamicFlags: string = 'gi';const regex: RegExp = new RegExp('pattern', dynamicFlags);

3. Méthodes RegExp et typage des résultats

Les principales méthodes pour travailler avec les expressions régulières en TypeScript :

• test() — retourne un boolean ;
• exec() — retourne RegExpExecArray | null ;
• match() — méthode de chaîne, retourne RegExpMatchArray | null ;
• replace() — remplace les correspondances et retourne une chaîne ;
• search() — retourne l'index de la première correspondance ou -1.

Voyons un exemple avec exec(), qui donne accès aux groupes de capture :

const dateRegex: RegExp = /(\\d{4})-(\\d{2})-(\\d{2})/;const dateStr: string = 'Aujourd\\'hui 2025-03-15';

const match: RegExpExecArray | null = dateRegex.exec(dateStr);

if (match) {  const [fullMatch, year, month, day] = match;  console.log(`Année : ${year}, Mois : ${month}, Jour : ${day}`);  // Affichage : Année : 2025, Mois : 03, Jour : 15} else {  console.log('Date non trouvée');}

Notez que match[0] est la correspondance complète, et les indices 1, 2, 3 sont les groupes de capture. TypeScript déduit correctement les types si vous utilisez la déstructuration.