URL

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die URL-Schnittstelle wird verwendet, um URLs zu analysieren, zu konstruieren, zu normalisieren und zu kodieren. Sie bietet Eigenschaften, die es Ihnen ermöglichen, die Komponenten einer URL einfach zu lesen und zu ändern.

In der Regel erstellen Sie ein neues URL-Objekt, indem Sie die URL als Zeichenfolge beim Aufruf des Konstruktors angeben oder eine relative URL und eine Basis-URL bereitstellen. Sie können dann die analysierten Komponenten der URL einfach lesen oder Änderungen an der URL vornehmen.

Konstruktor

URL(): Erstellt und gibt ein URL-Objekt aus einer URL-Zeichenfolge und optionaler Basis-URL-Zeichenfolge zurück. Gibt einen Fehler aus, wenn die übergebenen Argumente keine gültige URL definieren.

Instanz-Eigenschaften

hash: Eine Zeichenfolge, die ein '#' enthält, gefolgt von dem Fragmentbezeichner der URL.
host: Eine Zeichenfolge, die die Domain (das ist der Hostname) enthält, gefolgt von (falls angegeben) einem ':' und dem Port der URL.
hostname: Eine Zeichenfolge, die die Domain der URL enthält.
href: Ein stringifier, der eine Zeichenfolge mit der gesamten 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 Passwort enthält, das vor dem Domainnamen angegeben ist.
pathname: Eine Zeichenfolge, die ein anfängliches '/' enthält, gefolgt vom Pfad der URL, ohne Abfragezeichenfolge oder Fragment.
port: Eine Zeichenfolge, die die Portnummer der URL enthält.
protocol: Eine Zeichenfolge, die das Protokollschema der URL enthält, einschließlich des abschließenden ':'.
search: Eine Zeichenfolge, die die Parameterzeichenfolge der URL anzeigt; wenn Parameter angegeben sind, enthält diese Zeichenfolge alle, beginnend mit dem führenden ?-Zeichen.
searchParams Schreibgeschützt: Ein URLSearchParams-Objekt, das verwendet werden kann, um auf die einzelnen Abfrageparameter in search zuzugreifen.
username: Eine Zeichenfolge, die den Benutzernamen enthält, der vor dem Domainnamen angegeben ist.

Statische Methoden

canParse(): Gibt einen booleschen Wert zurück, der anzeigt, ob eine URL, die aus einer URL-Zeichenfolge und optionaler Basis-URL-Zeichenfolge definiert ist, analysierbar und gültig ist.
createObjectURL(): Gibt eine Zeichenfolge zurück, die eine eindeutige Blob-URL enthält, das ist eine URL mit blob: als Schema, gefolgt von einer undurchsichtigen Zeichenfolge, die das Objekt im Browser eindeutig identifiziert.
parse(): Erstellt und gibt ein URL-Objekt aus einer URL-Zeichenfolge und optionaler Basis-URL-Zeichenfolge zurück oder gibt null zurück, wenn die übergebenen Parameter eine ungültige URL definieren.
revokeObjectURL(): Hebt eine zuvor mit URL.createObjectURL() erstellte Objekt-URL auf.

Instanz-Methoden

toString(): Gibt eine Zeichenfolge mit der gesamten URL zurück. Es ist ein Synonym für URL.href, kann jedoch nicht zur Änderung des Wertes verwendet werden.
toJSON(): Gibt eine Zeichenfolge mit der gesamten URL zurück. Es gibt die gleiche Zeichenfolge zurück wie die href-Eigenschaft.

Nutzungshinweise

Der Konstruktor nimmt einen url-Parameter sowie einen optionalen base-Parameter an, um als Basis zu dienen, wenn der url-Parameter eine relative URL ist:

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

Der Konstruktor wird eine Ausnahme auslösen, wenn die URL nicht als gültige URL analysiert werden kann. Sie können entweder den obigen Code in einem try...catch-Block aufrufen oder die canParse() statische Methode verwenden, um zuerst zu überprüfen, ob die URL gültig ist:

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

URL-Eigenschaften können gesetzt werden, um die URL zu konstruieren:

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

URLs werden gemäß den in RFC 3986 gefundenen Regeln kodiert. Zum Beispiel:

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

Die URLSearchParams-Schnittstelle kann verwendet werden, um die URL-Abfragezeichenfolge zu erstellen und zu manipulieren.

Um die Suchparameter der URL des aktuellen Fensters zu erhalten, können Sie Folgendes tun:

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

Die toString()-Methode von URL gibt einfach den Wert der href-Eigenschaft zurück, sodass der Konstruktor direkt zum Normalisieren und Kodieren einer URL verwendet werden kann.

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

Spezifikationen

Specification
URL # url

URL