URL.pathname — Eigenschaft · JavaScript-Referenz

Signatur

URL.pathname

Beschreibung

Die Eigenschaft pathname eines URL-Objekts enthält den Pfad der URL, also den Teil nach Host und Port und vor dem ? (Suchparameter) bzw. # (Fragment). Bei hierarchischen URLs wie https: oder file: beginnt der Wert immer mit einem /; bei einer URL ohne expliziten Pfad (z. B. https://example.com) ist er "/".

Die Eigenschaft ist lesbar und schreibbar. Beim Setzen normalisiert der Parser den Wert: Ein fehlender führender Schrägstrich wird ergänzt, Segmente wie . und .. werden aufgelöst, und unzulässige Zeichen (z. B. Leerzeichen, Umlaute) werden prozentkodiert. Zeichen wie ? und # im zugewiesenen Wert werden ebenfalls kodiert und beenden den Pfad also nicht.

Typische Einsatzgebiete sind clientseitiges Routing, das Zerlegen eines Pfads in Segmente, das Prüfen von Dateiendungen oder das gezielte Umschreiben eines Pfads, während Host, Query und Fragment erhalten bleiben. Für nicht-hierarchische URLs wie mailto: oder data: enthält pathname den sogenannten „opaken Pfad“ (z. B. die E-Mail-Adresse) ohne führenden Schrägstrich.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Pfad. Wird normalisiert und bei Bedarf prozentkodiert; ein fehlender führender `/` wird bei hierarchischen URLs ergänzt.

Rückgabewert

Typ

string

Beschreibung

Der prozentkodierte Pfad der URL, z. B. "/docs/api/index.html". Mindestens "/" bei hierarchischen URLs; bei opaken URLs ggf. ohne führenden Schrägstrich.

Beispiele

Pfad einer URL auslesen

const url = new URL('https://shop.example.com:8080/produkte/schuhe?farbe=rot#bewertungen');
console.log(url.pathname);

const root = new URL('https://example.com');
console.log(root.pathname);

/produkte/schuhe /

Pfad in Segmente zerlegen (einfaches Routing)

const url = new URL('https://example.com/benutzer/42/beitraege/');

const segmente = url.pathname
  .split('/')
  .filter(Boolean)
  .map(decodeURIComponent);

const [bereich, id, unterseite] = segmente;
console.log(bereich, Number(id), unterseite);

benutzer 42 beitraege

Pfad setzen – Normalisierung und Kodierung

const url = new URL('https://example.com/alt?seite=2#top');

url.pathname = 'artikel/über uns';
console.log(url.href);

url.pathname = '/a/b/../c/./d';
console.log(url.pathname);

url.pathname = '/suche?q=x';
console.log(url.pathname, url.search);

https://example.com/artikel/%C3%BCber%20uns?seite=2#top /a/c/d /suche%3Fq=x ?seite=2

Dateiendung prüfen und opake URLs

const istPdf = (href) => new URL(href).pathname.toLowerCase().endsWith('.pdf');
console.log(istPdf('https://example.com/docs/Handbuch.PDF?v=3'));

const mail = new URL('mailto:info@example.com');
console.log(mail.pathname);

true info@example.com

// Wichtig · Fallstricke

Prozentkodierung: Der zurückgegebene Wert ist kodiert (%C3%BC statt ü). Für die Anzeige oder den Vergleich einzelne Segmente mit decodeURIComponent() dekodieren – nicht den ganzen Pfad, sonst werden kodierte %2F zu echten Trennern.
? und # beim Setzen: Sie werden kodiert und ändern search/hash nicht. Zum Setzen von Query-Parametern url.search oder url.searchParams verwenden.
Nachgestellter Schrägstrich: /pfad und /pfad/ sind unterschiedliche Werte – beim Routing ggf. normalisieren.
Opake URLs: Bei mailto:, data: oder javascript: hat das Setzen von pathname keine Wirkung.
Sicherheit: ..-Segmente werden zwar aufgelöst, kodierte Varianten wie %2e%2e je nach Kontext aber nicht zwingend. Serverseitig (Node.js) den Pfad nie ungeprüft auf Dateisystempfade abbilden (Path Traversal).
Kompatibilität: In allen modernen Browsern und Node.js (global ab Version 10) verfügbar; der Internet Explorer unterstützt den URL-Konstruktor nicht. Gleichwertig: location.pathname und HTMLAnchorElement.pathname.

Siehe auch

URL URL.search URL.hash URL.href URL.searchParams Location.pathname decodeURIComponent()