URL

Über das BOM (Browser Object Model) können wir auf Objekte zugreifen, die vom Browser zur Verfügung gestellt werden, z.B. auf das window Objekt.
Mit window.location haben wir Zugriff auf die URL der aktuell im Browsertab geladenen Website.

Bestandteile einer URL

Protokoll	Hostname	Pfad	Dateiname	Querystring	Hash
protocol	hostname	pathname	filename	search	hash
https://	www.domain.tld	/part-1/	index.html	?name=Pedro&color=black	#food

• host ist der Hostname inklusive eines eventuell vorhandenen Ports
• hostname ist der Hostname ohne Port
• pathname enthält den Pfad inklusive /
• search enthält die Parameter einer URL, auch Querystring genannt, inklusive eines vorangestellten Fragezeichens

URL Parameter

URL Paramter (query string parameter, URL variables) werden dazu genutzt, kleine Datenmengen von Seite zu Seite oder vom Client zum Server zu transportieren. Diese können alle möglichen Arten von Informationen enthalten, z.B. Suchparameter, Link Referrals, Produktinformationen, User preferences und weitere mehr.

URL Parameter mit JavaScript auslesen

Das URLSearchParams interface definiert verschiedene Hilfsmethoden, mit denen man den Query String einer URL bearbeiten kann. Für Legacy-Browser gibt es ein Polyfill (oder man verwendet eigene Funktionen). Wichtig zu wissen: Das URL parameter Format ist nicht einheitlich definiert! Für komplexere Manipulationen stehen spezifische Bibliotheken zur Verfügung.

Einen URL parameter auslesen

Nehmen wir diese URL als Beispiel:
https://example.com/?product=shirt&color=blue&newuser&size=m

Den query string ?product=shirt&color=blue&newuser&size=m erhalten wir mit window.locacion.search:

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m

Mit URLSearchParams können wir den Query String analysieren und die darin enthaltenen Methoden auf das Ergebnis anwenden:

const urlParams = new URLSearchParams(queryString);

Methoden des URLSearchParams-Objekts

URLSearchParams.get()

URLSearchParams.get() liefert uns den ersten Wert, der mit dem Suchparameter assoziiert ist, also Suchparameter product liefert shirt, Suchparameter color liefert blue und so weiter:

const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// empty string

const size = urlParams.get('size');
console.log(size);
// m

URLSearchParams.has()

URLSearchParams.has() prüft, ob ein Parameter existiert:

console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false

URLSearchParams.getAll()

URLSearchParams.getAll() gibt alle Werte, die mit einem Suchparameter verbunden sind, zurück.

console.log(urlParams.getAll('size'));
// ['m']

// Programmatically add a second size parameter:
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']

Über URL Parameter iterieren

URLSearchParams stellt uns auch bekannte Objekt-Iterationsmethoden um über keys, values und entries zu loopen, zur Verfügung:

const keys = urlParams.keys();
const values = urlParams.values();
const entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m

URL Parameter setzen

Man kann auch einen URL-Parameter zur URL hinzufügen:

urlParams.append('size', 'xl');
console.log(urlParams.getAll('size'));
// ['m', 'xl']

Polyfill und eigene Funktionen

Für Uralt-Browser gibt es einen Polyfill. Ansonsten können wir auch eigene Funktionen schreiben.

Weitere Links

• SelfHTML