Start · Sprachen · JavaScript · Referenz · URLPattern.port

URLPattern.port

Eigenschaft

Schreibgeschützter String mit dem normalisierten Muster, mit dem ein <code>URLPattern</code> den Port-Teil einer URL abgleicht.

seit JavaScript Chromium 95+, Firefox 142+, Safari 26+, Node.js 23 Kategorie: webapi

Signatur

get URLPattern.port

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

Typ
string
Beschreibung
Das normalisierte Port-Muster, z. B. "*", "", "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));
* 8080 (80|8080) ""

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"));
Erlaubte Ports: (3000|5173|8080) true false false

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);
:port 3000 3000

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/"));
"" true

// Wichtig · Fallstricke

  • Schreibgeschützt: Eine Zuweisung wie pattern.port = "80" hat keine Wirkung (im Strict Mode gibt es einen TypeError). Wer einen anderen Port braucht, erzeugt ein neues URLPattern.
  • "*" 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 unerwartete false-Ergebnisse bei localhost:3000-URLs.
  • Standard-Ports: Wie beim URL-Parser werden Standard-Ports (80 für http, 443 für https) bei bekanntem Protokoll zu "" normalisiert. new URL("https://a.de:443/").port ist ebenfalls "".
  • Nur Ziffern: Ein festes Port-Muster außerhalb des gültigen Bereichs (z. B. "99999" oder "abc") führt beim Konstruktor zu einem TypeError.
  • Kompatibilität: URLPattern gibt 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 Polyfill urlpattern-polyfill. Vorher prüfen mit "URLPattern" in globalThis.