Die URLPattern API: URLs auf moderne Weise abgleichen

Wenn Sie jemals einen regulären Ausdruck geschrieben haben, um eine Benutzer-ID aus einem URL-Pfad zu extrahieren, kennen Sie den Schmerz. Das Muster beginnt einfach, wächst dann aber zu einem unleserlichen Durcheinander aus Escape-Zeichen und Erfassungsgruppen. Wenn sich die Anforderungen ändern, debuggen Sie Regex, anstatt Features zu entwickeln.

Die URLPattern API bietet einen besseren Ansatz. Es handelt sich um einen WHATWG-Standard für modernes URL-Matching, der nativ in Browsern funktioniert und es Ihnen ermöglicht, URLs mit lesbaren Mustern statt kryptischen Regex-Ausdrücken abzugleichen und zu parsen. Dieser Artikel behandelt, welche Probleme URLPattern löst, seine Kernkonzepte und wann Frontend-Entwickler darauf zurückgreifen sollten.

Welches Problem löst URLPattern?

Vor URLPattern hatten Entwickler zwei Hauptoptionen für das Parsen von Web-URLs: eigene reguläre Ausdrücke schreiben oder Routing-Bibliotheken einbinden.

Reguläre Ausdrücke funktionieren, verursachen aber Wartungsprobleme. Ein Muster wie /^\/users\/([a-zA-Z0-9]+)\/?$/ erfordert jedes Mal mentales Parsing, wenn Sie es erneut betrachten. Erfassungsgruppen sind positionsbasiert und anonym – wenn Sie ein neues Segment hinzufügen, bricht bestehender Code.

Routing-Bibliotheken lösen das Lesbarkeits-Problem, fügen aber Bundle-Gewicht hinzu und führen Framework-spezifische Syntax ein. Ihre URL-Matching-Logik wird an ein bestimmtes Tool gebunden.

URLPattern bietet einen standardisierten Mittelweg. Es verwendet eine intuitive Syntax, die von beliebten Routing-Konventionen übernommen wurde:

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

Das :id-Segment ist eine benannte Gruppe. Keine Escape-Zeichen. Keine nummerierten Erfassungsgruppen. Das Muster liest sich wie die URL-Struktur, die es abgleicht.

Kernkonzepte der URLPattern API

Muster umfassen vollständige URLs oder einzelne Komponenten

URLPattern kann gegen vollständige URLs oder spezifische Komponenten abgleichen. Eine URL gliedert sich in acht Teile: Protokoll, Benutzername, Passwort, Hostname, Port, Pathname, Search und Hash.

Sie können Muster für jede Kombination definieren:

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

Dies gleicht jede Subdomain von example.com mit einem API-Pfad ab. Komponenten, die Sie nicht angeben, verwenden standardmäßig Wildcards und passen auf alles.

Testen vs. Extrahieren strukturierter Gruppen

URLPattern bietet zwei primäre Methoden mit unterschiedlichen Zwecken.

Die test()-Methode gibt einen Boolean zurück – passt diese URL auf das Muster?

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

Die exec()-Methode gibt detaillierte Match-Ergebnisse zurück, einschließlich erfasster Gruppen:

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

Benannte Gruppen werden zu Objekt-Properties. Kein Zugriff mehr auf result[1] in der Hoffnung, dass der Index korrekt ist.

Browser-Unterstützung für URLPattern

URLPattern erreichte Ende 2025 den Status „Baseline Newly Available”. Chrome, Edge, Firefox und Safari unterstützen es alle. Dies ist keine experimentelle Funktion oder eine Chrome-exklusive API mehr – es ist ein stabiler Web-Standard, den Sie in der Produktion verwenden können.

Für serverseitiges JavaScript sieht das Bild anders aus. Aktuelle Node.js 23+ Releases enthalten URLPattern, aber die Implementierung bleibt laut offizieller Dokumentation experimentell. Wenn Sie Code schreiben, der in beiden Umgebungen läuft, überprüfen Sie das Node.js-Verhalten separat von den Browser-Erwartungen.

Wann sollte man URLPattern verwenden?

URLPattern glänzt als Low-Level-Primitiv, nicht als vollständige Routing-Lösung. Erwägen Sie es für:

Service Worker, die Anfragen abfangen und unterschiedliche Caching-Strategien basierend auf URL-Mustern anwenden müssen.

SPA-Routing-Logik, wenn Sie benutzerdefinierte Navigationsbehandlung erstellen oder URL-Matching außerhalb des Routers Ihres Frameworks benötigen.

URL-gesteuerter UI-Zustand, wenn Komponenten die aktuelle URL parsen und Parameter extrahieren müssen.

URLPattern wird React Router oder Vue Router nicht ersetzen. Diese Frameworks bieten Navigation Guards, Lazy Loading und Integration mit Komponenten-Lifecycles. URLPattern erledigt eine Sache gut: URLs gegen Muster abgleichen und Daten extrahieren.

Ein praktischer Vergleich

Betrachten Sie das Extrahieren einer Kategorie und ID aus /products/electronics/123.

Mit Regex:

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

Mit URLPattern:

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

Die URLPattern-Version ist länger, aber selbstdokumentierend. Sechs Monate später werden Sie verstehen, was sie tut, ohne Regex zu dekodieren.

Fazit

URLPattern standardisiert URL-Matching über Browser hinweg mit einer sauberen, lesbaren Syntax. Es extrahiert benannte Parameter ohne Regex-Komplexität und funktioniert konsistent, egal ob Sie Pathnames, Hostnames oder vollständige URLs abgleichen.

Für Frontend-Entwickler, die SPAs, Service Worker oder jedes URL-gesteuerte Feature erstellen, bietet URLPattern eine zukunftssichere Grundlage. Schauen Sie sich die URLPattern-Dokumentation auf MDN für die vollständige Syntax-Referenz an und beginnen Sie damit, diese Regex-Muster durch etwas Wartbares zu ersetzen.

Häufig gestellte Fragen (FAQs)

Kann ich URLPattern mit Query-String-Parametern verwenden?

URLPattern gleicht die Search-Komponente von URLs ab, behandelt sie aber als rohen String. Für Query-Parameter wie ?page=2&sort=name kann URLPattern Muster gegen den Search-String abgleichen, aber Sie benötigen weiterhin URLSearchParams, um einzelne Schlüssel-Wert-Paare nach dem Matching zu parsen.

Unterstützt URLPattern optionale Pfadsegmente?

Ja. Sie können Segmente mit dem Fragezeichen-Modifikator optional machen. Zum Beispiel passt /users/:id? sowohl auf /users als auch auf /users/123. Die benannte Gruppe wird undefined sein, wenn das optionale Segment in der URL fehlt.

Wie behandelt URLPattern abschließende Schrägstriche?

Standardmäßig behandelt URLPattern abschließende Schrägstriche als signifikant. Ein Muster für /users/:id passt nicht auf /users/123/ mit abschließendem Schrägstrich. Um beide zu matchen, verwenden Sie ein optionales Trailing-Slash-Muster wie /users/:id/ mit entsprechenden Modifikatoren oder erstellen Sie Muster für beide Varianten.

Gibt es ein Polyfill für ältere Browser?

Ja. Das urlpattern-polyfill-Paket bietet URLPattern-Unterstützung für Browser und Node.js-Versionen, denen die native Implementierung fehlt. Importieren Sie es bedingt basierend auf Feature Detection, um das Laden unnötigen Codes in Umgebungen mit nativer Unterstützung zu vermeiden.