URL.hash — Eigenschaft · JavaScript-Referenz

Signatur

URL.hash

Beschreibung

Die Eigenschaft hash eines URL-Objekts enthält den Fragment-Teil der URL, also alles hinter dem ersten #, zusammen mit diesem #. Hat die URL kein Fragment oder ist es leer, liefert sie einen leeren String "".

Die Eigenschaft ist lesbar und schreibbar. Beim Setzen ist das führende # optional: url.hash = "abschnitt" und url.hash = "#abschnitt" ergeben dasselbe. Wenn Sie einen leeren String zuweisen, wird das Fragment samt # vollständig entfernt. Alle anderen Teile der URL (href, search usw.) werden automatisch angepasst.

Typische Einsatzfälle sind Sprungmarken innerhalb einer Seite, clientseitiges Routing in Single-Page-Apps (Hash-Routing), das Auslesen von Tokens aus OAuth-Weiterleitungen und das Erzeugen teilbarer Links, die einen bestimmten Zustand abbilden. Das Fragment wird nie an den Server übertragen, es wird nur im Browser ausgewertet.

Der Wert wird beim Lesen nicht dekodiert. Leerzeichen, Nicht-ASCII-Zeichen und einige Sonderzeichen (", <, >, `) werden beim Parsen und Setzen prozentkodiert. Den lesbaren Text erhalten Sie mit decodeURIComponent().

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Fragment-Bezeichner, mit oder ohne führendes `#`. Ein leerer String entfernt das Fragment.

Rückgabewert

Typ

string

Beschreibung

Das Fragment mit führendem # in prozentkodierter Form, oder "", wenn die URL kein oder nur ein leeres Fragment hat.

Beispiele

Fragment auslesen

const url = new URL("https://example.com/docs/api?lang=de#installation");
console.log(url.hash);
console.log(url.hash.slice(1)); // ohne #

const ohne = new URL("https://example.com/docs/");
console.log(ohne.hash === "");

#installation installation true

Fragment setzen und entfernen

const url = new URL("https://example.com/handbuch?v=2");

url.hash = "kapitel-3"; // # ist optional
console.log(url.href);

url.hash = "#kapitel-4";
console.log(url.href);

url.hash = ""; // Fragment komplett entfernen
console.log(url.href);

https://example.com/handbuch?v=2#kapitel-3 https://example.com/handbuch?v=2#kapitel-4 https://example.com/handbuch?v=2

Kodierung beachten: Umlaute und Leerzeichen

const url = new URL("https://example.com/");
url.hash = "Über uns";

console.log(url.hash);
console.log(decodeURIComponent(url.hash.slice(1)));

#%C3%9Cber%20uns Über uns

OAuth-Token aus dem Fragment lesen

// z. B. Weiterleitung nach Implicit-Flow-Login
const redirect = new URL(
  "https://app.example.com/callback#access_token=abc123&token_type=Bearer&expires_in=3600"
);

const params = new URLSearchParams(redirect.hash.slice(1));
console.log(params.get("access_token"));
console.log(Number(params.get("expires_in")));

abc123 3600

// Wichtig · Fallstricke

Leeres Fragment: Bei new URL("https://example.com/#") liefert hash den Wert "", obwohl href weiterhin auf # endet. Wenn Sie wissen müssen, ob überhaupt ein # vorhanden ist, prüfen Sie href.includes("#").
Keine automatische Dekodierung: Vergleichen Sie hash nicht direkt mit Klartext, der Umlaute oder Leerzeichen enthält. Dekodieren Sie vorher mit decodeURIComponent(). Dabei kann bei fehlerhaften Sequenzen wie %E0 ein URIError auftreten, deshalb gegebenenfalls in try/catch einschließen.
Kein Seitenwechsel: Wenn Sie hash an einem URL-Objekt ändern, passiert im Browser nichts. Nur location.hash bzw. history.pushState() verändern die Adresszeile. Das Ändern von location.hash löst das Event hashchange aus.
Sicherheit: Das Fragment wird vollständig vom Client bestimmt. Fügen Sie es niemals ungeprüft per innerHTML ins DOM ein, sonst droht DOM-basiertes XSS. Tokens im Fragment landen zwar nicht in Server-Logs, können aber über den Browserverlauf oder Skripte von Drittanbietern abfließen.
Kompatibilität: Wird von allen modernen Browsern unterstützt, ebenso von Node.js (global ab Version 10), Deno und Bun.

Siehe auch

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