Mit Javascript GET url Parameter auslesen

Manchmal möchte man in einer einfachen HTML Datei ohne PHP auch mal die GET Parameter auslesen. Beispielsweise ließe sich damit ein simpler A/B Test einer Adwords Plain HTML Landingpage erstellen, wo nur wenige Elemente auf der Seite durch URL Parameter angepasst werden. Gut, dass man da mit Javascript GET url Parameter auslesen kann. Ich zeige Dir in diesem Beitrag eine sehr einfache und effektive Methode dafür.

Im Web kursieren viele komplizierte Möglichkeiten die spezielle, zusätzliche RegExp Funktionen einbinden müssen — und alle möglichen Fälle abfangen. Dabei geht es auch so simpel einfach. Dieses Beispiel lässt sich schnell und einfach direkt an der Stelle einsetzen, wo die Abfrage benötigt wird. Ganz ohne Ballast, ganz ohne zusätzliche Funktionen, ganz ohne externe Bibliotheken.

Nehmen wir als Beispiel die URL: https://mizine.de/url_parameter_js.html?param1=hallo&param2=echo

Um an die Parameter der URL zu kommen, reichen nur ein paar wenige Zeilen Javascript.

const urlParams = new URLSearchParams(window.location.search);

alert('param1 ist ' + urlParams.get('param1') + ' und param2 ist ' + urlParams.get('param2'));

Ergibt dann diese Ausgabe:

Erklärung

// Holt den gesamten Querystring der URL (param1=hallo&param2=echo)
const queryString = window.location.search;

// Extrahiert aus dem Querystring einzelne Parameter
const urlParams = new URLSearchParams(queryString);

// Liest mit .get() die Werte der Parameter aus
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');

alert('param1 ist ' + param1 + ' und param2 ist ' + param2);

Prüfen, ob Parameter existiert

Man kann damit auch prüfen, ob ein Parameter gesetzt ist

const urlParams = new URLSearchParams(window.location.search);
if(urlParams.has('param1')){
  // true
}

if(urlParams.has('param5')){
  // false
}

Die Funktion URLSearchParams geht davon aus, dass die Parameter durch das Zeichen & getrennt sind, wie in den W3C-Spezifikationen angegeben. Trennung mit & als Trennzeichen funktionieren damit nicht!

Die Funktion funktioniert auch, wenn ein Parameter kein Gleichheitszeichen hat oder wenn er zwar ein Gleichheitszeichen, aber keinen Wert hat.
Beispiele:
https://mizine.de/url_parameter_js.html?param1&param2=echo
https://mizine.de/url_parameter_js.html?param1=&param2=echo

Die Werte von doppelten Parametern funktionieren nicht.
https://mizine.de/url_parameter_js.html?param2=Wert1&param2=Wert2

Es gibt aber eine Funktion, die auch dies ermöglicht, siehe: Sitepoint Artikel (en)