Expressions régulières en TypeScript avec exemples

Expressions régulières en TypeScript : syntaxe, méthodes et exemples

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 de rechercher, remplacer et vérifier du texte, mais aussi d'obtenir un typage strict des résultats. Dans cet article, nous allons aborder tous les aspects du travail avec RegExp en TypeScript : de la syntaxe de base aux techniques avancées avec des exemples de code.

1. Création d'expressions régulières en TypeScript

En TypeScript, comme en JavaScript, il existe deux façons de créer une expression régulière :

Syntaxe littérale

La méthode la plus courante et pratique consiste à utiliser des barres obliques :

const pattern: RegExp = /hello/gi;

Ici, g signifie recherche globale, i signifie insensibilité à la casse. Le type RegExp est déduit automatiquement, mais on peut le spécifier explicitement pour la lisibilité.

Constructeur RegExp

Utilisé lorsque le motif est formé dynamiquement :

const searchTerm: string = "world";const dynamicPattern: RegExp = new RegExp(searchTerm, "gi");

Le deuxième argument est une chaîne contenant les drapeaux. Le type de la valeur retournée est RegExp.

2. Méthodes principales de RegExp et String

TypeScript hérite de toutes les méthodes de JavaScript, mais y ajoute un typage strict. Examinons les méthodes clés avec des exemples.

Méthode test()

Vérifie s'il y a une correspondance dans la chaîne. Retourne boolean.

const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;const email: string = "user@example.com";

const isValid: boolean = emailRegex.test(email);console.log(isValid); // true

Méthode exec()

Recherche une correspondance et retourne des informations détaillées. Retourne RegExpExecArray | null.

const text: string = "Prix : 1500 roubles, réduction : 200 roubles";const pricePattern: RegExp = /(\\d+)\\s*roubles/g;

let match: RegExpExecArray | null;while ((match = pricePattern.exec(text)) !== null) {    console.log(`Trouvé : ${match[0]}, nombre : ${match[1]}`);}// Affichage :// Trouvé : 1500 roubles, nombre : 1500// Trouvé : 200 roubles, nombre : 200

Méthode match() de la chaîne

Fonctionne de manière similaire à exec(), mais est appelée sur la chaîne. Retourne RegExpMatchArray | null.

const phone: string = "Contacts : +7 (999) 123-45-67";const phoneRegex: RegExp = /\\+7\\s*\\(\\d{3}\\)\\s*\\d{3}-\\d{2}-\\d{2}/;

const result: RegExpMatchArray | null = phone.match(phoneRegex);if (result) {    console.log(`Téléphone trouvé : ${result[0]}`);    // Téléphone trouvé : +7 (999) 123-45-67}

Méthode replace()

Remplace les correspondances par une nouvelle chaîne. Retourne string. Prend en charge un callback pour les remplacements complexes.

function formatDate(input: string): string {    const datePattern: RegExp = /(\\d{4})-(\\d{2})-(\\d{2})/;    return input.replace(datePattern, "$3.$2.$1");}

const isoDate: string = "2025-03-10";const formatted: string = formatDate(isoDate);console.log(formatted); // "10.03.2025"

Méthode split()

Divise une chaîne selon une expression régulière. Retourne string[].

const data: string = "pomme;poire;orange;banane";const items: string[] = data.split(/;\\s*/);console.log(items); // ["pomme", "poire", "orange", "banane"]

3. Drapeaux et leurs combinaisons

Les drapeaux contrôlent le comportement de l'expression régulière. En TypeScript, ils sont définis soit dans le littéral, soit comme deuxième argument du constructeur.

Les drapeaux peuvent être combinés : /pattern/giu ou new RegExp("pattern", "giu").

4. Groupes et captures

Les groupes dans les expressions régulières permettent d'extraire des parties spécifiques d'une correspondance. En TypeScript, les groupes capturants sont typés comme des éléments de tableau.

Groupes nommés

TypeScript prend en charge les groupes nommés, ce qui rend le code plus lisible :

function parseUrl(url: string): { protocol: string; domain: string; path: string } | null {    const urlPattern: RegExp = /^(?https?):\\/\\/(?[^\\/]+)(?\\/.*)?$/;    const match = urlPattern.exec(url);        if (match?.groups) {        return {            protocol: match.groups.protocol,            domain: match.groups.domain,            path: match.groups.path || '/'        };    }    return null;}

const url: string = "https://example.com/page";const parsed = parseUrl(url);console.log(parsed);// { protocol: 'https', domain: 'example.com', path: '/page' }

Groupes non capturants

Utilisés pour le regroupement sans sauvegarde dans le résultat :

const pattern: RegExp = /(?:https?):\\/\\/(?:www\\.)?([^\\/]+)/;const result = pattern.exec("https://www.example.com");console.log(result?.[1]); // "example.com"

5. Assertions

Les assertions vérifient une condition sans inclure les caractères dans la correspondance.

Assertions de début et de fin

const startPattern: RegExp = /^Hello/;  // La chaîne commence par "Hello"const endPattern: RegExp = /world!$/;   // La chaîne se termine par "world!"

console.log(startPattern.test("Hello world!")); // trueconsole.log(endPattern.test("Hello world!"));   // true

Assertions de contexte (lookahead et lookbehind)

// Lookahead positif : trouve "px" seulement s'il est suivi d'un nombreconst lookaheadPattern: RegExp = /\\d+(?=px)/;console.log("Largeur : 100px".match(lookaheadPattern)?.[0]); // "100"

// Lookbehind négatif : trouve "chat" seulement s'il n'est pas précédé de "gros "const lookbehindPattern: RegExp = /(?

interface EmailValidation {    isValid: boolean;    domain?: string;    localPart?: string;}

function validateEmail(email: string): EmailValidation {    const emailRegex: RegExp = /^(?[^@]+)@(?[^@]+\\.[^@]+)$/;    const match = emailRegex.exec(email);        if (match?.groups) {        return {            isValid: true,            domain: match.groups.domain,            localPart: match.groups.local        };    }    return { isValid: false };}

const result = validateEmail("user@example.com");console.log(result.domain); // "example.com"

// Correctconst pattern1: RegExp = new RegExp("\\\\d+");

// Également correct (littéral)const pattern2: RegExp = /\\d+/;

// Problématique - peut bloquer le navigateurconst badPattern: RegExp = /(a+)+b/;

// Optimiséconst goodPattern: RegExp = /a+b/;

// Inefficacefunction findNumbersBad(texts: string[]): number[] {    return texts.flatMap(t => t.match(/\\d+/g) || []);}

// Efficaceconst numberRegex: RegExp = /\\d+/g;function findNumbersGood(texts: string[]): number[] {    return texts.flatMap(t => t.match(numberRegex) || []);}