HTML-Tools

Kostenlose URLPattern Tester

Testen Sie URL-Muster mit der URLPattern-API — benannte Gruppen, Wildcards und Regex-Abgleich ohne manuelles Parsen.

Tool wird geladen...

Was ist URLPattern Tester?

URLPattern ist eine standardisierte Browser-API, die deklaratives URL-Matching mit benannten Gruppen, Wildcards und Regex-Einschränkungen bietet. Anstatt fehleranfällige Regex-Muster oder manuelles Pfad-Parsing für URL-Routing zu schreiben, verwenden Entwickler new URLPattern('/books/:id'), um URLs abzugleichen und Parameter lesbar und wartbar zu extrahieren. Die API unterstützt alle URL-Komponenten - Protokoll, Hostname, Port, Pfadname, Suchabfrage und Hash - und behandelt URL-Kodierung automatisch.

Kurze Antwort

URLPattern bietet deklaratives URL-Matching mit benannten Gruppen, Wildcards und Regex-Einschränkungen - kein Regex oder manuelles Pfad-Parsing nötig. Verwenden Sie die Syntax /books/:id, um URLs abzugleichen und Parameter zu extrahieren. Nativ verfügbar in Chrome 95+, Edge 95+, Safari 15.4+ und Firefox 115+. Auch unterstützt in Deno, Cloudflare Workers und Node.js 21+.

Last updated: 2026-05-31

Einschränkungen

Die Browserunterstützung für URLPattern ist stark in Chromium und Safari (15.4+), aber Firefox-Unterstützung kam erst mit Version 115 und die API ist in einigen serverseitigen Laufzeitumgebungen noch experimentell. Fügen Sie das urlpattern-polyfill npm-Paket für Produktionsanwendungen hinzu, die ältere Browser oder legacy Node.js-Versionen unterstützen.
URLPattern-Matching ist langsamer als einfache String-Operationen. Für hochfrequentes URL-Matching in engen Schleifen, die tausende URLs pro Sekunde verarbeiten, ist ein kompilierter Regex oder ein trie-basierter Router leistungsfähiger. URLPattern priorisiert Lesbarkeit vor Rohdurchsatz.
URLPattern unterstützt kein Reverse-Matching - Sie können keine URL aus einem Muster und Parametern generieren. Es testet nur, ob eine URL übereinstimmt und extrahiert benannte Gruppenwerte. Für bidirektionale URL-Verarbeitung bieten Bibliotheken wie path-to-regexp sowohl Matching als auch URL-Generierung.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Geben Sie ein URLPattern-Muster ein, das :param für benannte Gruppen (z.B. /blog/:slug), * für Wildcard-Matching (z.B. /api/*) und /:param? für optionale Segmente verwendet. Sie können auch Regex-Einschränkungen wie /users/:id(\d+) hinzufügen.
Fügen Sie eine oder mehrere Test-URLs hinzu, um sie gegen das Muster abzugleichen. Jede Test-URL wird unabhängig ausgewertet, sodass Sie mehrere Pfade, Abfrage-Strings und Randfälle in einer einzigen Sitzung prüfen können.
Überprüfen Sie die Live-Match-Ergebnisse - jede Test-URL zeigt, ob sie übereinstimmt, die extrahierten benannten Gruppenwerte und alle Gruppen, die für nicht übereinstimmende optionale Segmente null oder undefined zurückgegeben haben.
Kopieren Sie den generierten JavaScript-Code, der die URLPattern-API mit Ihrem spezifischen Muster und den Test-URLs verwendet. Der Code enthält Match-Prüfungen und Parameter-Extraktionslogik, die direkt in Ihr Projekt übernommen werden kann.

Wofür du es nutzen kannst

Implementieren Sie clientseitiges Routing in einer Single-Page-Anwendung mit URLPattern anstelle von fragilen Regex-Parsing. Benannte Gruppen machen Routenparameter selbstdokumentierend und automatisch URL-dekodiert.
Validieren Sie eingehende URL-Strukturen in einem Service Worker Fetch-Handler - gleichen Sie Anfrage-URLs gegen bekannte Routenmuster ab und extrahieren Sie Parameter für selektives Caching und Antwortlogik.
Testen Sie URL-Umstrukturierungen während einer Site-Migration - überprüfen Sie, ob alte URL-Muster die erwarteten Parameter abgleichen und neue Weiterleitungsregeln die korrekten Pfadsegmente erfassen, bevor Sie in die Produktion bereitstellen.

Anwendungsfalle

Praxisbeispiele

Beispiel

SPA-Routen-Matching mit URLPattern

Eine Vanilla-JavaScript-SPA definiert Routen wie /blog/:slug und /products/:category/:id. Verwenden Sie URLPattern, um eingehende history.pushState-URLs abzugleichen. Das Muster /blog/:slug matched /blog/hello-world und extrahiert {slug: 'hello-world'} als benannte Gruppe. Kein Aufteilen an Schrägstrichen oder Schreiben fragiler Regex mehr - URLPattern behandelt optionale Gruppen, Wildcards und Regex-Einschränkungen deklarativ.

Beispiel

Service Worker Cache-Routing

Ein Service Worker muss API-Antworten für /api/posts/:id cachen, aber /api/admin/*-Pfade ausschließen. Erstellen Sie ein URLPattern mit pathname: '/api/posts/:id' und verwenden Sie es im Fetch-Event-Handler, um übereinstimmende Anfragen selektiv zu cachen. Benannte Gruppen erleichtern die Konstruktion von Cache-Keys wie 'post-' + result.pathname.groups.id.

Haufige Fehler

Zu vergessen, dass URLPattern standardmäßig gegen die vollständige URL inklusive Origin matched, wenn ein String-Konstruktor verwendet wird. Verwenden Sie new URLPattern({ pathname: '/books/:id' }), um das Matching auf den Pfadnamen zu beschränken, oder fügen Sie den erwarteten Origin in das Muster ein für Full-URL-Matching.
Anzunehmen, dass URLPattern.exec()-Gruppenwerte immer Strings sind - nicht übereinstimmende optionale Gruppen geben undefined zurück, und Wildcard-Gruppen geben einen leeren String für Nulllängen-Übereinstimmungen zurück. Prüfen Sie immer auf undefined, bevor Sie extrahierte Gruppenwerte in der Anwendungslogik verwenden.
URLPattern zu verwenden, wo einfache String-Methoden ausreichen - für grundlegende Präfix- oder Suffix-Prüfungen bei bekannten statischen Pfaden fügt URLPattern unnötige Komplexität und Leistungskosten hinzu. Verwenden Sie .startsWith(), .includes() oder exakten String-Vergleich für nicht gemusterte URL-Prüfungen.

Überprüfung

Öffnen Sie die Browser-Konsole und führen Sie new URLPattern({ pathname: '/test/:id' }).exec('https://example.com/test/123') aus. Überprüfen Sie, dass das Ergebnisobjekt pathname.groups.id mit dem Wert '123' enthält und dass das Ergebnis nicht null ist.
Testen Sie Randfälle: eine nicht übereinstimmende URL gibt null zurück (kein Fehler), eine optionale Gruppe wie /:id? gibt undefined zurück, wenn das Segment ausgelassen wird, und ein Wildcard-Muster /files/* erfasst den verbleibenden Pfad in die Wildcard-Gruppe, die über result.pathname.groups[0] zugänglich ist.

FAQ

Fragen zu URLPattern Tester

Wie unterscheidet sich URLPattern von der Verwendung von Regex für URL-Matching?

URLPattern ist deklarativ und selbstdokumentierend: /users/:id ist sofort lesbar, während /^\/users\/(\d+)$/ erst analysiert werden muss. URLPattern behandelt URL-Kodierung automatisch (%2F in Pfadsegmenten), unterstützt benannte Gruppen für lesbare Parameter-Extraktion und verarbeitet korrekt optionale Gruppen, Wildcards und Regex-Einschränkungen. Es bietet auch eine konsistente API über Browser, Deno und Cloudflare Workers Umgebungen hinweg.

Kann URLPattern Abfrage-Strings und Hash-Fragmente abgleichen?

Ja. URLPattern unterstützt Matching gegen alle URL-Komponenten einschließlich Search (Abfrage-String) und Hash. Verwenden Sie new URLPattern({ pathname: '/search', search: 'q=:query' }), um Abfrageparameter nach Namen zu extrahieren. Wildcards in der Search-Komponente ermöglichen das Matchen zusätzlicher Parameter: 'q=:query&*' matched alle zusätzlichen Abfrageparameter nach dem q-Parameter.

Funktioniert URLPattern in Node.js und serverseitigen Laufzeitumgebungen?

URLPattern ist nativ verfügbar in Chrome 95+, Edge 95+, Safari 15.4+ und Firefox 115+. Auf dem Server ist URLPattern in Deno und Cloudflare Workers integriert. In Node.js ist URLPattern über das urlpattern-polyfill npm-Paket oder nativ in Node.js 21+ mit dem --experimental-url-Flag verfügbar. Bun unterstützt URLPattern nativ ohne Flags oder Polyfills.

Kann ich Regex innerhalb von URLPattern-benannten Gruppen verwenden?

Ja. URLPattern unterstützt Regex-Einschränkungen innerhalb benannter Gruppen mit geklammerten Mustern: /users/:id(\d+) matched nur numerische IDs, während /posts/:slug([a-z0-9-]+) nur Kleinbuchstaben-Slug-Strings matched. Regex-Einschränkungen ermöglichen es, übereinstimmende Werte ohne Nachbearbeitungsvalidierung einzugrenzen. Der Regex wird auf das gematchte Pfadsegment angewendet, nicht auf die vollständige URL.

Verwandte Tools