L'API URLPattern : Matcher les URLs à la Manière Moderne

Si vous avez déjà écrit une expression régulière pour extraire un identifiant utilisateur d’un chemin d’URL, vous connaissez la douleur. Le motif commence simple, puis se transforme en un fouillis illisible de caractères d’échappement et de groupes de capture. Lorsque les exigences changent, vous déboguez des regex au lieu de développer des fonctionnalités.

L’API URLPattern offre une meilleure approche. Il s’agit d’un standard WHATWG pour le matching d’URL moderne qui fonctionne nativement dans les navigateurs, vous permettant de matcher et d’analyser des URLs avec des motifs lisibles plutôt que des regex cryptiques. Cet article couvre ce que URLPattern résout, ses concepts fondamentaux, et quand les développeurs frontend devraient l’utiliser.

Quel Problème URLPattern Résout-il ?

Avant URLPattern, les développeurs avaient deux options principales pour l’analyse d’URL web : écrire des expressions régulières personnalisées ou intégrer des bibliothèques de routage.

Les expressions régulières fonctionnent mais créent des problèmes de maintenance. Un motif comme /^\/users\/([a-zA-Z0-9]+)\/?$/ nécessite une analyse mentale à chaque fois que vous le revisitez. Les groupes de capture sont positionnels et anonymes—si vous ajoutez un nouveau segment, le code existant casse.

Les bibliothèques de routage résolvent le problème de lisibilité mais ajoutent du poids au bundle et introduisent une syntaxe spécifique au framework. Votre logique de matching d’URL devient liée à un outil particulier.

URLPattern fournit un terrain d’entente standardisé. Il utilise une syntaxe intuitive empruntée aux conventions de routage populaires :

const pattern = new URLPattern({ pathname: '/users/:id' })

Le segment :id est un groupe nommé. Pas de caractères d’échappement. Pas de groupes de capture numérotés. Le motif se lit comme la structure d’URL qu’il matche.

Concepts Fondamentaux de l’API URLPattern

Les Motifs Couvrent des URLs Complètes ou des Composants Individuels

URLPattern peut matcher des URLs complètes ou des composants spécifiques. Une URL se décompose en huit parties : protocole, nom d’utilisateur, mot de passe, nom d’hôte, port, pathname, search et hash.

Vous pouvez définir des motifs pour n’importe quelle combinaison :

const pattern = new URLPattern({
  hostname: '*.example.com',
  pathname: '/api/:version/*'
})

Ceci matche n’importe quel sous-domaine de example.com avec un chemin API. Les composants que vous ne spécifiez pas sont par défaut des wildcards, matchant n’importe quoi.

Tester vs. Extraire des Groupes Structurés

URLPattern offre deux méthodes principales avec des objectifs distincts.

La méthode test() retourne un booléen—est-ce que cette URL matche le motif ?

pattern.test('https://api.example.com/api/v2/users') // true

La méthode exec() retourne des résultats de match détaillés, incluant les groupes capturés :

const result = pattern.exec('https://api.example.com/api/v2/users')
console.log(result.pathname.groups.version) // 'v2'

Les groupes nommés deviennent des propriétés d’objet. Plus besoin d’accéder à result[1] en espérant que l’index soit correct.

Support Navigateur pour URLPattern

URLPattern a atteint le statut Baseline Newly Available fin 2025. Chrome, Edge, Firefox et Safari le supportent tous. Ce n’est plus une fonctionnalité expérimentale ou une API exclusive à Chrome—c’est un standard web stable que vous pouvez utiliser en production.

Pour le JavaScript côté serveur, la situation diffère. Les versions récentes de Node.js 23+ incluent URLPattern, mais l’implémentation reste expérimentale selon la documentation officielle. Si vous écrivez du code qui s’exécute dans les deux environnements, vérifiez le comportement de Node.js séparément des attentes navigateur.

Quand Utiliser URLPattern

URLPattern brille comme primitive de bas niveau, pas comme solution de routage complète. Envisagez-le pour :

Les service workers qui doivent intercepter les requêtes et appliquer différentes stratégies de mise en cache basées sur des motifs d’URL.

La logique de routage SPA où vous construisez une gestion de navigation personnalisée ou avez besoin de matching d’URL en dehors du routeur de votre framework.

L’état d’interface piloté par URL lorsque les composants doivent analyser l’URL actuelle et extraire des paramètres.

URLPattern ne remplacera pas React Router ou Vue Router. Ces frameworks fournissent des gardes de navigation, du chargement lazy, et une intégration avec les cycles de vie des composants. URLPattern fait une chose bien : matcher des URLs contre des motifs et extraire des données.

Une Comparaison Pratique

Considérons l’extraction d’une catégorie et d’un ID depuis /products/electronics/123.

Avec regex :

const match = /^\/products\/([^/]+)\/(\d+)$/.exec(pathname)
const category = match?.[1]
const id = match?.[2]

Avec URLPattern :

const pattern = new URLPattern({ pathname: '/products/:category/:id' })
const result = pattern.exec({ pathname })
const { category, id } = result?.pathname.groups ?? {}

La version URLPattern est plus longue mais auto-documentée. Six mois plus tard, vous comprendrez ce qu’elle fait sans décoder de regex.

Conclusion

URLPattern standardise le matching d’URL à travers les navigateurs avec une syntaxe claire et lisible. Il extrait des paramètres nommés sans la complexité des regex et fonctionne de manière cohérente que vous matchiez des pathnames, des noms d’hôte ou des URLs complètes.

Pour les développeurs frontend construisant des SPAs, des service workers, ou toute fonctionnalité pilotée par URL, URLPattern fournit une fondation pérenne. Consultez la documentation URLPattern de MDN pour la référence complète de la syntaxe et commencez à remplacer ces motifs regex par quelque chose de maintenable.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.