JavaScript URL-Parameter abrufen

Harshit Jindal 12 Oktober 2023
  1. Verwenden Sie die searchParams des URL-Objekts, um die Werte aus den GET-Parametern zu erhalten
  2. Verwenden Sie location.search, um die Werte aus den GET-Parametern zu erhalten
JavaScript URL-Parameter abrufen

In diesem Tutorial erfahren Sie, wie Sie die Werte aus den GET-Parametern abrufen.

Verwenden Sie die searchParams des URL-Objekts, um die Werte aus den GET-Parametern zu erhalten

Das URL-Objekt repräsentiert die durch die Parameter definierte URL. Wir können seine searchParams-Eigenschaft verwenden, um ein URLSearchParams-Objekt zurückzugeben, das es uns ermöglicht, auf die in GET dekodierten Parameter zuzugreifen. Wir können dann die Funktion get verwenden, die an das Objekt URLSearchParams angehängt ist, um den Wert eines beliebigen Parameters innerhalb der URL abzurufen.

var input_string =
    'http://www.google.com/app.html?apple=1&banana=3&cherry=m2';  // window.location.href
var url = new URL(input_string);
var cherry = url.searchParams.get('cherry');
console.log(cherry);

Im obigen Code erhalten wir zuerst das URLSearchParams-Objekt und verwenden dann seine get-Funktion, um dekodierte Parameterwerte zu erhalten.

Verwenden Sie location.search, um die Werte aus den GET-Parametern zu erhalten

Die Eigenschaft search von location ist im Grunde ein Suchstring, der auch query string genannt wird. Um die Werte von Parametern zu erhalten, teilen wir den String auf und speichern dann die Parameter und ihre Werte in einem Dictionary. Wir können dann einfach das Dictionary verwenden, um alle Schlüssel-Wert-Paare zu erhalten.

var GET_parameters = {};

if (location.search) {
  var splitts = location.search.substring(1).split('&');
  for (var i = 0; i < splitts.length; i++) {
    var key_value_pair = splitts[i].split('=');
    if (!key_value_pair[0]) continue;
    GET_parameters[key_value_pair[0]] = key_value_pair[1] || true;
  }
}

var abc = GET_parameters.abc;

Alle besprochenen Methoden werden von allen gängigen Browsern unterstützt.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn