HTMLAnchorElement.port — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.port

Beschreibung

Die Eigenschaft port gibt es auf jedem <a>-Element. Sie gehört zu den URL-Zerlegungseigenschaften, die HTMLAnchorElement vom Mixin HTMLHyperlinkElementUtils übernimmt. Sie liefert den Port-Teil der aufgelösten URL aus href als String, zum Beispiel "8080". Der Doppelpunkt davor gehört nicht dazu.

Wenn die URL keinen Port angibt oder den Standardport des Schemas verwendet (80 bei http:, 443 bei https:), ist port ein leerer String "". Den tatsächlich verwendeten Port musst du in diesem Fall selbst aus protocol ableiten.

Du kannst die Eigenschaft auch beschreiben. Dann ändert der Browser das href-Attribut direkt, und alle anderen Teile der URL bleiben erhalten. So lassen sich Links zum Beispiel auf einen Entwicklungsserver umbiegen, ohne Strings selbst zusammenzusetzen. Setzt du einen leeren String oder den Standardport, entfernt der Browser den Port aus der URL.

Typische Anwendungen: Links auf interne Dienste mit bestimmten Ports erkennen, Umgebungen wechseln (lokal oder produktiv) und Links filtern, bevor Tracking- oder Sicherheitsregeln greifen. Für URLs, die nicht im DOM stehen, ist das URL-Objekt die bessere Wahl. Es hat eine gleichnamige Eigenschaft port, die genauso funktioniert.

Parameter

Name	Typ	Default	Beschreibung
$value (Setter)	string \| number		Neue Portnummer beim Zuweisen. Zahlen werden in Strings umgewandelt. Der Browser liest nur die führenden Ziffern; Werte über `65535` und nicht numerische Werte ignoriert er. Ein leerer String entfernt den Port.

Rückgabewert

Typ

string

Beschreibung

Die Portnummer als String ohne führenden Doppelpunkt, z. B. "3000". Beim Standardport, bei fehlendem Port oder bei einem ungültigen bzw. fehlenden href ist der Wert ein leerer String "".

Beispiele

Port eines Links auslesen

const link = document.createElement('a');
link.href = 'https://api.example.com:8443/v1/users';
console.log(link.port);

link.href = 'https://example.com/';
console.log(JSON.stringify(link.port)); // Standardport 443 → leer

8443 ""

Tatsächlich verwendeten Port ermitteln

const effectivePort = (anchor) => {
  if (anchor.port) return Number(anchor.port);
  const defaults = { 'http:': 80, 'https:': 443, 'ftp:': 21 };
  return defaults[anchor.protocol] ?? null;
};

const a = document.createElement('a');
a.href = 'http://intranet.local/dashboard';
console.log(effectivePort(a));

80

Alle lokalen Links auf einen Entwicklungsport umschreiben

// Beispiel: Links zu localhost auf den Vite-Dev-Server (Port 5173) umleiten
document.querySelectorAll('a[href]').forEach((a) => {
  if (a.hostname === 'localhost' && a.port !== '5173') {
    a.port = 5173; // href wird automatisch angepasst
  }
});

const demo = document.createElement('a');
demo.href = 'http://localhost:3000/admin?tab=2';
demo.port = '5173';
console.log(demo.href);

http://localhost:5173/admin?tab=2

Port entfernen und Standardport setzen

const a = document.createElement('a');
a.href = 'https://shop.example.com:8080/cart';

a.port = '443'; // Standardport für https → wird weggelassen
console.log(a.href);

a.port = '9000';
a.port = '';    // Port entfernen
console.log(a.href);

https://shop.example.com/cart https://shop.example.com/cart

// Wichtig · Fallstricke

Immer ein String: Zum Vergleichen solltest du Number(a.port) verwenden oder mit Strings wie '8080' vergleichen. a.port === 8080 ist immer false.
Leerer String beim Standardport: "" heißt nicht „kein Port“, sondern „Standardport des Schemas“. Werte deshalb zusätzlich protocol aus.
Ungültige Werte werden stillschweigend ignoriert: Zuweisungen wie a.port = 'abc' oder 70000 lassen href unverändert und werfen keinen Fehler. Bei '8080abc' übernimmt der Browser nur die führenden Ziffern (8080).
Schemata ohne Host: Bei URLs wie mailto:, javascript: oder file: hat eine Zuweisung an port keine Wirkung, und der Getter liefert "".
Relative URLs: Der Wert bezieht sich auf die URL, die gegen die Basis-URL des Dokuments aufgelöst wurde (<base> bzw. document.baseURI). Er stammt nicht aus dem wörtlichen Attributtext.
Sicherheit: Für Allowlist-Prüfungen nicht nur hostname vergleichen, sondern origin. Ein Link auf example.com:8081 ist ein anderer Ursprung als example.com.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch von alten Versionen. HTMLAreaElement und URL haben dieselbe Eigenschaft.

Siehe auch

URL.port Location.port HTMLAnchorElement.host HTMLAnchorElement.ping HTMLAnchorElement.text