Signatur
Beschreibung
Der Konstruktor URLPattern() übersetzt ein URL-Muster in ein Objekt, das mit test() prüft, ob eine URL passt, und mit exec() die passenden Teile herausliest. Die Syntax lehnt sich an die bekannte Bibliothek path-to-regexp an: :name steht für benannte Gruppen, * für Platzhalter, {…}? für optionale Abschnitte, und (…) für eigene reguläre Ausdrücke.
Als Muster geht entweder ein String (vollständige URL oder, zusammen mit baseURL, eine relative URL) oder ein Objekt mit einzelnen Bestandteilen wie protocol, hostname, port, pathname, search oder hash. Lässt man in der Objektform Bestandteile weg, gelten sie als Platzhalter * und passen also auf jeden Wert. Gibt man dagegen baseURL an, werden fehlende Bestandteile aus der Basis-URL übernommen.
Typische Einsatzbereiche sind clientseitiges Routing, das Abfangen von Anfragen in Service Workern (fetch-Event), serverseitige Router in Node.js oder Deno und allgemein alle Stellen, an denen man bisher URLs mit selbst geschriebenen regulären Ausdrücken zerlegt hat.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $input | string | URLPatternInit | {} | Das Muster. Entweder ein Muster-String (z. B. "https://example.com/books/:id") oder ein Objekt mit den Schlüsseln protocol, username, password, hostname, port, pathname, search, hash und baseURL. Ohne Angabe passt das Muster auf jede URL. |
| $baseURL | string | Basis-URL, gegen die ein relativer Muster-String aufgelöst wird. Nur zusammen mit einem String als input erlaubt; bei einem Objekt gehört die Basis in input.baseURL. |
|
| $options | { ignoreCase?: boolean } | { ignoreCase: false } | Einstellungen. Mit ignoreCase: true wird beim Vergleich nicht zwischen Groß- und Kleinschreibung unterschieden. |
Rückgabewert
URLPattern-Objekt mit den Methoden test() und exec() sowie den normalisierten Bestandteilen als nur lesbare Eigenschaften (pathname, hostname usw.).Beispiele
Muster als Objekt: nur den Pfad festlegen
const pattern = new URLPattern({ pathname: '/books/:id' });
console.log(pattern.test('https://example.com/books/42'));
console.log(pattern.test('https://example.com/authors/7'));
const result = pattern.exec('https://shop.example.org/books/42');
console.log(result.pathname.groups);Relativer Muster-String mit Basis-URL
const apiPattern = new URLPattern('/api/:version/*', 'https://example.com');
console.log(apiPattern.hostname);
console.log(apiPattern.test('https://example.com/api/v2/users/5'));
console.log(apiPattern.test('https://other.com/api/v2/users/5'));
const match = apiPattern.exec('https://example.com/api/v2/users/5');
console.log(match.pathname.groups);Eigener RegExp, optionaler Abschnitt und ignoreCase
// Nur numerische IDs, optionaler Slug, Groß-/Kleinschreibung egal
const productPattern = new URLPattern(
{ pathname: '/product/:id(\\d+){/:slug}?' },
{ ignoreCase: true }
);
console.log(productPattern.test('https://example.com/PRODUCT/17'));
console.log(productPattern.test('https://example.com/product/abc'));
console.log(productPattern.exec('https://example.com/product/17/rote-schuhe').pathname.groups);Routing im Service Worker
const routes = [
{ pattern: new URLPattern({ pathname: '/api/*' }), strategy: 'network' },
{ pattern: new URLPattern({ pathname: '/*.:ext(css|js|png)' }), strategy: 'cache' }
];
self.addEventListener('fetch', (event) => {
const route = routes.find(({ pattern }) => pattern.test(event.request.url));
if (route?.strategy === 'cache') {
event.respondWith(
caches.match(event.request).then((cached) => cached ?? fetch(event.request))
);
}
});