Die URL-API ist ein Bestandteil des URL-Standards, der definiert, was einen gültigenUniform Resource Locator ausmacht, sowie die API, die den Zugriff auf URLs und deren Manipulation ermöglicht. Der URL-Standard definiert zudem Konzepte wie Domains, Hosts und IP-Adressen und versucht auch, den veraltetenapplication/x-www-form-urlencodedMIME-Typ, der zur Übermittlung von Webformular-Inhalten als Satz von Schlüssel/Wert-Paaren verwendet wird, standardisiert zu beschreiben.

Konzepte und Verwendung

Der Großteil des URL-Standards beschäftigt sich mit derDefinition einer URL und ihrer Strukturierung und Analyse. Ebenfalls behandelt werden Definitionen verschiedener Begriffe, die sich auf die Adressierung von Computern in einem Netzwerk beziehen, sowie Algorithmen zur Analyse von IP-Adressen und DOM-Adressen. Für die meisten Entwickler ist die API selbst von größerem Interesse.

Zugriff auf URL-Komponenten

Das Erstellen einesURL-Objekts für eine gegebene URL analysiert die URL und ermöglicht den schnellen Zugriff auf ihre Bestandteile über ihre Eigenschaften.

let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");let host = addr.host;let path = addr.pathname;

Das obige Snippet erstellt einURL-Objekt für den Artikel, den Sie gerade lesen, und ruft dann die Eigenschaftenhost undpathname ab. In diesem Fall sind diese Zeichenfolgendeveloper.mozilla.org und/de/docs/Web/API/URL_API.

Ändern der URL

Die meisten Eigenschaften vonURL sind veränderbar; Sie können ihnen neue Werte zuweisen, um die von dem Objekt dargestellte URL zu ändern. Zum Beispiel, um eine URL zu erstellen und ihren Benutzernamen zu setzen:

let myUsername = "some-guy";let addr = new URL("https://example.com/login");addr.username = myUsername;

Das Setzen des Wertes vonusername setzt nicht nur den Wert dieser Eigenschaft, sondern aktualisiert die gesamte URL. Nach der Ausführung des obigen Code-Snippets ist der vonhref zurückgegebene Werthttps://some-guy@example.com/login. Dies gilt für alle schreibbaren Eigenschaften.

Abfragen

Diesearch-Eigenschaft einerURL enthält den Abfragezeichenfolgenabschnitt der URL. Wenn die URL beispielsweisehttps://example.com/login?user=some-guy&page=news ist, dann ist der Wert dersearch-Eigenschaft?user=some-guy&page=news. Sie können auch die Werte einzelner Parameter mit derURLSearchParams-Methodeget() nachschlagen:

let addr = new URL("https://example.com/login?user=some-guy&page=news");try {  loginUser(addr.searchParams.get("user"));  gotoPage(addr.searchParams.get("page"));} catch (err) {  showErrorMessage(err);}

Im obigen Snippet werden beispielsweise der Benutzername und die Zielseite aus der Abfrage entnommen und an entsprechende Funktionen übergeben, die vom Code der Seite verwendet werden, um sich anzumelden und den Benutzer zu seinem gewünschten Ziel innerhalb der Seite zu leiten.

Andere Funktionen innerhalb vonURLSearchParams ermöglichen es Ihnen, den Wert von Schlüsseln zu ändern, Schlüssel und ihre Werte hinzuzufügen und zu löschen sowie die Liste der Parameter zu sortieren.

Schnittstellen

Die URL-API ist eine einfache, mit nur ein paar Schnittstellen:

URL

Kann verwendet werden, umURLs zu analysieren, zu konstruieren, zu normalisieren und zu kodieren.

URLSearchParams

Definiert Hilfsmethoden zum Arbeiten mit der Abfragezeichenfolge einer URL.

Beispiele

URL-Parameter mit der URL-API analysieren

Es wäre möglich, URL-Parameter zu verarbeiten, indem man eine URL als Zeichenfolge analysiert, sie auf bestimmte Zeichen aufteilt oder reguläre Ausdrücke verwendet, aber es ist viel einfacher, ein neuesURL-Objekt dafür zu erstellen. Das folgende Beispiel erhält die Dokument-URL vondocument.location.href, sortiert die Parameter mitURLSearchParams.sort() und extrahiert die Schlüssel mitURLSearchParams.keys.

Für jeden Schlüssel in der Dokument-URL fügen wir einer<table>-Element Zeilen hinzu, eine für jeden in den Parametern gefundenen Schlüssel, wobei die erste Spalte den Namen des Schlüssels und die zweite Spalte den Wert enthält:

const table = document.querySelector(".param-table");const url = new URL(document.location.href);url.searchParams.sort();const keys = url.searchParams.keys();for (let key of keys) {  let val = url.searchParams.get(key);  let row = document.createElement("tr");  let cell = document.createElement("td");  cell.innerText = key;  row.appendChild(cell);  cell = document.createElement("td");  cell.innerText = val;  row.appendChild(cell);  table.appendChild(row);}

Sie können eineLive-Version dieses Beispiels ausprobieren undden vollständigen Quellcode auf GitHub ansehen.

Spezifikationen

Browser-Kompatibilität

api.URL

api.URLSearchParams

Siehe auch

• Fetch API
• CSS<url> Typ
• encodeURI()
• encodeURIComponent()