URL

Konstruktor

URL()

Erstellt ein URL-Objekt aus einer URL-Zeichenfolge und einer optionalen Basis-URL-Zeichenfolge und gibt es zurück. Löst eine Ausnahme aus, wenn die übergebenen Argumente keine gültige URL definieren.

Instanzeigenschaften

hash

Eine Zeichenfolge, die ein '#' gefolgt vom Fragmentbezeichner der URL enthält.

host

Eine Zeichenfolge, die die Domain (also den Hostname) und, falls ein Port angegeben wurde, ein ':' gefolgt vom Port der URL enthält.

hostname

Eine Zeichenfolge, die die Domain der URL enthält.

href

Ein Stringifier, der eine Zeichenfolge mit der vollständigen URL zurückgibt.

origin Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Ursprung der URL enthält, also ihr Schema, ihre Domain und ihren Port.

password

Eine Zeichenfolge, die das vor dem Domainnamen angegebene Passwort enthält.

pathname

Eine Zeichenfolge, die einen führenden '/' gefolgt vom Pfad der URL enthält, ohne Query-String oder Fragment.

port

Eine Zeichenfolge, die die Portnummer der URL enthält.

protocol

Eine Zeichenfolge, die das Protokollschema der URL einschließlich des abschließenden ':' enthält.

search

Eine Zeichenfolge mit den URL-Parametern. Wenn Parameter vorhanden sind, enthält sie alle Parameter und beginnt mit dem führenden Zeichen ?.

searchParams Schreibgeschützt

Ein URLSearchParams-Objekt, mit dem Sie auf die einzelnen Query-Parameter in search zugreifen können.

username

Eine Zeichenfolge, die den vor dem Domainnamen angegebenen Benutzernamen enthält.

Statische Methoden

canParse()

Gibt einen booleschen Wert zurück, der angibt, ob sich aus einer URL-Zeichenfolge und einer optionalen Basis-URL-Zeichenfolge eine gültige URL parsen lässt.

createObjectURL()

Gibt eine Zeichenfolge mit einer eindeutigen Blob-URL zurück. Diese URL hat blob: als Schema, gefolgt von einer opaken Zeichenfolge, die das Objekt im Browser eindeutig identifiziert.

parse()

Erstellt ein URL-Objekt aus einer URL-Zeichenfolge und einer optionalen Basis-URL-Zeichenfolge und gibt es zurück. Wenn die übergebenen Parameter eine ungültige URL definieren, wird null zurückgegeben.

revokeObjectURL()

Widerruft eine zuvor mit URL.createObjectURL() erstellte Objekt-URL.

Instanzmethoden

toString()

Gibt eine Zeichenfolge mit der vollständigen URL zurück. Die Methode entspricht URL.href, kann aber nicht zum Ändern des Werts verwendet werden.

toJSON()

Gibt eine Zeichenfolge zurück, die das URL-Objekt darstellt und denselben Wert wie URL.toString() hat. Wird automatisch von JSON.stringify() aufgerufen.

Hinweise zur Verwendung

Der Konstruktor erwartet einen url-Parameter und optional einen base-Parameter, der als Basis dient, wenn url eine relative URL ist.

Beachten Sie, dass „dogs“ im folgenden Beispiel das Dateinamensegment ist (da kein abschließender Schrägstrich vorhanden ist). Die relative URL „cats“ wird relativ zum Verzeichnis-Teil der Basis-URL interpretiert, also zu http://www.example.com/animals/. Weitere Informationen finden Sie unter Relative Verweise auf eine URL auflösen.

const url = new URL("cats", "http://www.example.com/animals/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/animals/cats"

Der Konstruktor löst eine Ausnahme aus, wenn sich die URL nicht als gültige URL parsen lässt. Sie können den obigen Code entweder in einem try...catch-Block aufrufen oder zunächst mit der statischen Methode canParse() prüfen, ob die URL gültig ist:

if (URL.canParse("cats", "http://www.example.com/animals/dogs")) {
  const url = new URL("cats", "http://www.example.com/animals/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/animals/cats"
} else {
  console.log("Invalid URL");
}

Sie können die Eigenschaften von URL setzen, um die URL zusammenzusetzen:

url.hash = "tabby";
console.log(url.href); // "http://www.example.com/animals/cats#tabby"

URLs werden nach den Regeln in RFC 3986 kodiert. Zum Beispiel:

url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

Mit der URLSearchParams-Schnittstelle können Sie den Query-String einer URL erstellen und bearbeiten.

So erhalten Sie die Query-Parameter aus der URL des aktuellen Fensters:

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

Die Methode toString() von URL gibt lediglich den Wert der Eigenschaft href zurück. Daher können Sie den Konstruktor verwenden, um eine URL direkt zu normalisieren und zu kodieren.

const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill für URL in core-js
• URL API
• Was ist eine URL?
• URLSearchParams.