Location.pathname — Eigenschaft · JavaScript-Referenz

Signatur

Location.pathname

Beschreibung

Die Eigenschaft pathname des Location-Interfaces enthält den Pfad der aktuellen Dokument-URL, also alles zwischen Host (inklusive Port) und dem ersten ? bzw. #. Der Wert beginnt immer mit einem Schrägstrich /; bei einer URL ohne expliziten Pfad lautet er einfach "/".

Typische Einsatzgebiete sind clientseitiges Routing, das Hervorheben des aktiven Menüpunkts, Analytics-Tracking oder das Ableiten von Ressourcen-IDs aus der URL (z. B. /produkte/42). Da Query-String (location.search) und Fragment (location.hash) nicht enthalten sind, eignet sich pathname gut für saubere Pfadvergleiche.

Die Eigenschaft ist auch beschreibbar: Eine Zuweisung navigiert zur neuen URL mit geändertem Pfad (Host, Protokoll und Port bleiben erhalten; Query-String und Hash werden verworfen). Dabei entsteht ein neuer Eintrag in der Browser-Historie – wer die Seite nicht neu laden möchte, verwendet stattdessen history.pushState().

Sonderzeichen im Pfad werden prozentkodiert zurückgegeben (z. B. %C3%BC für „ü“). Zum Anzeigen oder Vergleichen mit Klartext sollte der Wert daher mit decodeURIComponent() dekodiert werden.

Parameter

Name	Typ	Default	Beschreibung
$value (Setter)	string		Neuer Pfad beim Zuweisen. Ein fehlender führender `/` wird automatisch ergänzt; die Zuweisung löst eine Navigation aus.

Rückgabewert

Typ

string

Beschreibung

Der prozentkodierte Pfad der URL, beginnend mit /, z. B. "/blog/artikel-1". Ohne Pfad: "/".

Beispiele

Pfad der aktuellen Seite auslesen

// Angenommen: https://example.com/shop/produkte/42?farbe=rot#details
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);

/shop/produkte/42 ?farbe=rot #details

Aktiven Menüpunkt hervorheben

const currentPath = location.pathname.replace(/\/$/, '') || '/';

document.querySelectorAll('nav a').forEach((link) => {
  const linkPath = new URL(link.href).pathname.replace(/\/$/, '') || '/';
  link.classList.toggle('active', linkPath === currentPath);
  if (linkPath === currentPath) link.setAttribute('aria-current', 'page');
});

Einfaches Routing mit Pfadsegmenten

// URL: https://example.com/benutzer/m%C3%BCller/profil
const segments = location.pathname
  .split('/')
  .filter(Boolean)
  .map(decodeURIComponent);

console.log(segments);

const [bereich, name] = segments;
if (bereich === 'benutzer') {
  console.log(`Profil von ${name} laden …`);
}

["benutzer", "müller", "profil"] Profil von müller laden …

Pfad setzen vs. ohne Neuladen ändern

// Navigiert zu /login (Seite wird neu geladen, Query & Hash entfallen)
const goToLogin = () => {
  location.pathname = '/login';
};

// Ändert nur die URL, ohne Neuladen (SPA)
const updatePathSilently = (path) => {
  history.pushState({}, '', path);
  console.log(location.pathname);
};

updatePathSilently('/dashboard');

/dashboard

// Wichtig · Fallstricke

Kodierung: Der Wert ist prozentkodiert. Vergleiche mit Klartext-Strings (Umlaute, Leerzeichen) schlagen ohne decodeURIComponent() fehl. decodeURIComponent() wirft bei ungültigen Sequenzen einen URIError – ggf. mit try/catch absichern.
Abschließender Schrägstrich: /blog und /blog/ sind unterschiedliche Werte. Für Vergleiche normalisieren.
Setzen löst Navigation aus: Das Zuweisen lädt die Seite neu und verwirft search und hash. Für SPAs history.pushState()/replaceState() verwenden.
Sicherheit: Der Pfad ist vom Nutzer steuerbar. Niemals ungeprüft per innerHTML ins DOM schreiben (XSS-Gefahr) – textContent nutzen.
Sonderschemata: Bei file:-URLs enthält pathname den Dateisystempfad; bei about:blank oder data:-URLs ist der Wert nicht hierarchisch (z. B. "blank").
Für beliebige URLs (nicht nur die aktuelle) bietet new URL(str).pathname dasselbe Verhalten. Browser-Unterstützung: alle Browser, auch sehr alte.

Siehe auch

Location Location.search Location.hash Location.href URL.pathname History.pushState() Notification.navigate