Signatur
Beschreibung
Die Eigenschaft port einer URLPattern-Instanz gibt das Muster für den Port einer URL zurück, also den Teil nach dem Doppelpunkt hinter dem Hostnamen (z. B. 8080 in http://localhost:8080/). Der Wert ist das Muster in normalisierter Form, so wie der Konstruktor es aus dem übergebenen Objekt oder String erzeugt hat. Es ist nicht zwingend genau die ursprüngliche Eingabe.
Das Port-Muster nutzt dieselbe Syntax wie die anderen Bestandteile: feste Werte ("8080"), benannte Gruppen (":port"), reguläre Ausdrücke in Klammern ("(80|8080)") und den Platzhalter *. Fehlt der Port im Konstruktor-Objekt ganz, ist das Muster "*" und jeder Port passt. Beim Konstruktor-String mit Hostname, aber ohne Port (z. B. "https://example.com/*"), ergibt sich dagegen der leere String "". Dann passen nur URLs ohne ausdrücklichen Port bzw. mit dem Standard-Port.
Nützlich ist die Eigenschaft vor allem, um Muster zu prüfen oder zu protokollieren, etwa in einem Router, in Service-Worker-Regeln oder in Tests. Für das eigentliche Abgleichen verwendet man test() oder exec(). Der Rückgabewert von exec() enthält unter result.port die gefundene Eingabe und die benannten Gruppen.
Rückgabewert
"*", "", "8080" oder ":port".Beispiele
Port-Muster aus verschiedenen Konstruktor-Aufrufen auslesen
const alle = new URLPattern({ pathname: "/api/*" });
const fest = new URLPattern({ hostname: "localhost", port: "8080" });
const auswahl = new URLPattern({ port: "(80|8080)" });
const ausString = new URLPattern("https://example.com/books/:id");
console.log(alle.port);
console.log(fest.port);
console.log(auswahl.port);
console.log(JSON.stringify(ausString.port));
Nur Entwicklungsserver auf bestimmten Ports erkennen
const devServer = new URLPattern({
protocol: "http",
hostname: "localhost",
port: "(3000|5173|8080)"
});
console.log(`Erlaubte Ports: ${devServer.port}`);
console.log(devServer.test("http://localhost:5173/app"));
console.log(devServer.test("http://localhost:4000/app"));
console.log(devServer.test("http://localhost/app"));
Port über eine benannte Gruppe mit exec() auslesen
const pattern = new URLPattern({ hostname: "localhost", port: ":port" });
console.log(pattern.port);
const result = pattern.exec("http://localhost:3000/dashboard");
console.log(result.port.input);
console.log(result.port.groups.port);
Standard-Port wird normalisiert
const https = new URLPattern({ protocol: "https", port: "443" });
// 443 ist der Standard-Port für https und wird zu "" normalisiert
console.log(JSON.stringify(https.port));
console.log(https.test("https://example.com/"));
// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
pattern.port = "80"hat keine Wirkung (im Strict Mode gibt es einenTypeError). Wer einen anderen Port braucht, erzeugt ein neuesURLPattern. "*"und""bedeuten etwas anderes: Wird der Port im Objekt weggelassen, passt jeder Port ("*"). Beim Konstruktor-String mit Hostname ohne Port entsteht"". Dann passen nur URLs ohne Port bzw. mit dem Standard-Port. Das ist ein häufiger Grund für unerwartetefalse-Ergebnisse beilocalhost:3000-URLs.- Standard-Ports: Wie beim
URL-Parser werden Standard-Ports (80 fürhttp, 443 fürhttps) bei bekanntem Protokoll zu""normalisiert.new URL("https://a.de:443/").portist ebenfalls"". - Nur Ziffern: Ein festes Port-Muster außerhalb des gültigen Bereichs (z. B.
"99999"oder"abc") führt beim Konstruktor zu einemTypeError. - Kompatibilität:
URLPatterngibt es in Chromium-Browsern seit Version 95. In Firefox und Safari ist es erst seit 2025 verfügbar, in Node.js als globales Objekt ab Version 23.8. Für ältere Umgebungen gibt es das Polyfillurlpattern-polyfill. Vorher prüfen mit"URLPattern" in globalThis.