Wie wandelt man URL-Parameter in ein JavaScript-Objekt um?

Question

Ich habe einen String wie diesen:

abc=foo&def=%5Basf%5D&xyz=5

Wie kann ich sie in ein JavaScript-Objekt wie dieses umwandeln?

{
  abc: 'foo',
  def: '[asf]',
  xyz: 5
}

Answer 1

Eine andere Lösung basiert auf dem neuesten Standard von URLSearchParams ( https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )

function getQueryParamsObject() {
  const searchParams = new URLSearchParams(location.search.slice(1));
  return searchParams
    ? _.fromPairs(Array.from(searchParams.entries()))
    : {};
}

Bitte beachten Sie, dass diese Lösung die folgenden Komponenten verwendet

Array.von ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from )

et _.fromPairs ( https://lodash.com/docs#fromPairs ) von lodash der Einfachheit halber.

Es sollte einfach sein, eine kompatiblere Lösung zu erstellen, da Sie Zugang zu folgenden Informationen haben searchParams.entries() Iterator.

Answer 2

Es gibt eine ganz einfache und falsche Antwort mit ES6:

console.log(
  Object.fromEntries(new URLSearchParams(`abc=foo&def=%5Basf%5D&xyz=5`))
);

Aber diese eine Zeile Code deckt nicht mehrere gleiche Tasten müssen Sie etwas Komplizierteres verwenden:

function parseParams(params) {
  const output = [];
  const searchParams = new URLSearchParams(params);

  // Set will return only unique keys()
  new Set([...searchParams.keys()])
    .forEach(key => {
      output[key] = searchParams.getAll(key).length > 1 ?  
        searchParams.getAll(key) : // get multiple values
        searchParams.get(key); // get single value
    });

  return output;
}

console.log(
   parseParams('abc=foo&cars=Ford&cars=BMW&cars=Skoda&cars=Mercedes')
)

Der Code erzeugt die folgende Struktur:

[
  abc: "foo"
  cars: ["Ford", "BMW", "Skoda", "Mercedes"]
]

Answer 3

Ich hatte das gleiche Problem, versuchte die Lösungen hier, aber keiner von ihnen wirklich funktioniert, da ich Arrays in der URL-Parameter, wie diese hatte:

?param[]=5&param[]=8&othr_param=abc&param[]=string

So endete ich schreiben meine eigene JS-Funktion, die ein Array aus dem Param in URI macht:

/**
 * Creates an object from URL encoded data
 */
var createObjFromURI = function() {
    var uri = decodeURI(location.search.substr(1));
    var chunks = uri.split('&');
    var params = Object();

    for (var i=0; i < chunks.length ; i++) {
        var chunk = chunks[i].split('=');
        if(chunk[0].search("\\[\\]") !== -1) {
            if( typeof params[chunk[0]] === 'undefined' ) {
                params[chunk[0]] = [chunk[1]];

            } else {
                params[chunk[0]].push(chunk[1]);
            }

        } else {
            params[chunk[0]] = chunk[1];
        }
    }

    return params;
}

Answer 4

ES6 one liner (wenn man es angesichts der langen Zeile so nennen kann)

[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})

Answer 5

Einer der einfachsten Wege, dies zu tun, ist die Verwendung der URLSearchParam-Schnittstelle.

Nachfolgend finden Sie den funktionierenden Codeausschnitt:

let paramObj={},
    querystring=window.location.search,
    searchParams = new URLSearchParams(querystring);    

  //*** :loop to add key and values to the param object.
 searchParams.forEach(function(value, key) {
      paramObj[key] = value;
   });