Générateur et testeur de regex en ligne

À quoi sert une expression régulière ?

Une expression régulière (abrégée regex ou regexp) est un motif de recherche qui permet de trouver, valider ou transformer des chaînes de caractères selon des règles précises. Elle est disponible dans quasiment tous les langages de programmation modernes : JavaScript, PHP, Python, Java, Go…

Les cas d'usage les plus courants sont :

• Validation de formulaire — vérifier qu'un email, un numéro de téléphone ou un mot de passe respecte un format attendu.
• Extraction de données — récupérer des portions spécifiques d'une chaîne (dates, URLs, codes…).
• Remplacement — nettoyer un texte, supprimer des balises HTML, formater des numéros.
• Découpage — séparer une chaîne selon un délimiteur variable.
• Recherche avancée — trouver tous les mots qui commencent par une lettre donnée, détecter des doublons…

Aide-mémoire des symboles regex

Voici les symboles les plus utilisés dans les expressions régulières. Ce tableau de référence vous permettra de construire rapidement vos propres patterns.

Utilisation des regex en JavaScript

JavaScript intègre nativement les expressions régulières via l'objet RegExp ou la notation littérale /pattern/flags. Voici les 4 méthodes essentielles à connaître :

// -------------------------------------------------------
// 1. test() — vérifie si le pattern existe dans la chaîne
//    Retourne : true ou false
// -------------------------------------------------------
const emailRegex = /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test('user@example.com')); // true
console.log(emailRegex.test('invalide@'));         // false

// -------------------------------------------------------
// 2. match() — récupère tous les matches sous forme de tableau
//    Avec le flag g : retourne un tableau de toutes les occurrences
//    Sans flag g    : retourne le premier match avec ses groupes
// -------------------------------------------------------
const texte = 'Contact : alice@mail.com ou bob@test.fr';
const matches = texte.match(/[a-z]+@[a-z]+\.[a-z]+/g);
console.log(matches); // ['alice@mail.com', 'bob@test.fr']

// -------------------------------------------------------
// 3. replace() — remplace les matches par une nouvelle chaîne
//    Avec le flag g : remplace toutes les occurrences
// -------------------------------------------------------
const sale = '  Hello   World  ';
// Supprime les espaces multiples entre les mots
const propre = sale.trim().replace(/\s+/g, ' ');
console.log(propre); // 'Hello World'

// -------------------------------------------------------
// 4. split() — découpe la chaîne selon le pattern
// -------------------------------------------------------
const csv = 'alice,  bob  , carol';
// Découpe en acceptant virgule + espaces optionnels
const noms = csv.split(/\s*,\s*/);
console.log(noms); // ['alice', 'bob', 'carol']

// -------------------------------------------------------
// 5. Regex dynamique avec new RegExp()
//    Utile quand le pattern vient d'une variable utilisateur
// -------------------------------------------------------
const motCle = 'angular';
const regex  = new RegExp(motCle, 'gi'); // flags passés en 2e argument
const phrase = 'Angular est basé sur angular.';
console.log(phrase.replace(regex, '[ANGULAR]'));
// '[ANGULAR] est basé sur [ANGULAR].'

Drapeaux (flags) disponibles

Utilisation en Angular & TypeScript

Dans Angular, les expressions régulières sont principalement utilisées avec les formulaires réactifs via Validators.pattern(), et dans les composants pour valider ou transformer des données.

Validation avec Validators.pattern()

// user-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements OnInit {

  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      // Champ email — pattern email standard
      email: ['', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/)
      ]],

      // Mot de passe — min 8 car., une maj., une min., un chiffre, un symbole
      password: ['', [
        Validators.required,
        Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)
      ]],

      // Téléphone français
      phone: ['', [
        Validators.pattern(/^(?:\+33|0)[1-9](?:\d{2}){4}$/)
      ]],

      // Slug URL — uniquement minuscules, chiffres et tirets
      slug: ['', [
        Validators.pattern(/^[a-z0-9]+(?:-[a-z0-9]+)*$/)
      ]]
    });
  }

  // Raccourci pour accéder facilement aux contrôles dans le template
  get email()    { return this.form.get('email'); }
  get password() { return this.form.get('password'); }
  get phone()    { return this.form.get('phone'); }
  get slug()     { return this.form.get('slug'); }

  onSubmit(): void {
    if (this.form.valid) {
      console.log('Formulaire valide :', this.form.value);
    }
  }
}

Template HTML avec messages d'erreur

<!-- user-form.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <!-- Champ email -->
  <div class="form-group">
    <label for="email">Email</label>
    <input id="email" type="email" formControlName="email" class="form-control">
    <!-- Message d'erreur affiché si le pattern échoue -->
    <div *ngIf="email?.errors?.['pattern'] && email?.touched" class="text-danger">
      Format email invalide.
    </div>
  </div>

  <!-- Champ mot de passe -->
  <div class="form-group">
    <label for="password">Mot de passe</label>
    <input id="password" type="password" formControlName="password" class="form-control">
    <div *ngIf="password?.errors?.['pattern'] && password?.touched" class="text-danger">
      Le mot de passe doit contenir 8+ caractères, une majuscule, un chiffre et un symbole.
    </div>
  </div>

  <button type="submit" [disabled]="form.invalid" class="btn btn-primary">
    Envoyer
  </button>

</form>

// validators.ts — constantes regex réutilisables dans toute l'appli
export const REGEX_EMAIL    = /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/;
export const REGEX_PHONE_FR = /^(?:\+33|0)[1-9](?:\d{2}){4}$/;
export const REGEX_SLUG     = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
export const REGEX_PASSWORD = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

// Utilisation dans un composant
import { REGEX_EMAIL } from './validators';
// Validators.pattern(REGEX_EMAIL)

Erreurs fréquentes avec les regex

Voici les pièges les plus courants rencontrés par les développeurs débutants et intermédiaires :

• Oublier d'échapper les caractères spéciaux — un point . dans une regex signifie "n'importe quel caractère". Pour matcher un point littéral, écrivez \..
• Oublier le flag g avec replace() — sans flag global, seule la première occurrence est remplacée.
• ReDoS (catastrophic backtracking) — certains patterns comme (a+)+ peuvent provoquer un blocage du navigateur sur des entrées malveillantes. Évitez les groupes imbriqués avec quantificateurs sur des jeux de caractères similaires.
• Utiliser new RegExp(userInput) sans sanitisation — si le pattern vient d'un utilisateur, il peut injecter des caractères qui cassent la regex ou causent un ReDoS. Toujours valider l'entrée.
• Confusion test() vs match() — test() retourne un booléen, idéal pour la validation. match() retourne les groupes capturés, idéal pour l'extraction.

// ❌ Mauvais — le point n'est pas échappé
const regexIP = /^(\d{1,3}.){3}\d{1,3}$/;
// "192X168X1X1" passerait la validation (. = n'importe quel car.)

// ✅ Correct — le point est bien échappé avec \.
const regexIPcorrecte = /^(\d{1,3}\.){3}\d{1,3}$/;

// ❌ Mauvais — replace sans flag g
const texte = 'foo foo foo';
console.log(texte.replace(/foo/, 'bar')); // 'bar foo foo'

// ✅ Correct — replace avec flag g
console.log(texte.replace(/foo/g, 'bar')); // 'bar bar bar'

Conclusion

Les expressions régulières sont un outil fondamental du développeur web. Maîtriser les symboles de base (., *, +, ^, $, \d, \w) et les flags (g, i, m) vous permettra de résoudre une grande majorité des problèmes de validation et de transformation de texte.

En Angular, combinez Validators.pattern() avec des constantes regex centralisées pour garder vos formulaires maintenables et testables. Utilisez le testeur ci-dessus pour valider vos patterns avant de les intégrer dans votre code.