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

console.log(decodeURI('abc=foo&def=%5Basf%5D&xyz=5')
  .split('&')
  .reduce((result, current) => {
    const [key, value] = current.split('=');

    result[key] = value;

    return result
  }, {}))

Answer 2

Wenn Sie URI.js verwenden, können Sie verwenden:

https://medialize.github.io/URI.js/docs.html#static-parseQuery

var result = URI.parseQuery("?foo=bar&hello=world&hello=mars&bam=&yup");
result === {
  foo: "bar",
  hello: ["world", "mars"],
  bam: "",
  yup: null
};

Answer 3

Es gibt eine leichtgewichtige Bibliothek namens DuBistI.js die getestet wurde und dies wirklich einfach macht.

YouAreI = require('YouAreI')
uri = new YouAreI('http://user:pass@www.example.com:3000/a/b/c?d=dad&e=1&f=12.3#fragment');

uri.query_get() => { d: 'dad', e: '1', f: '12.3' }

Answer 4

Hier ist eine, die ich verwende:

var params = {};
window.location.search.substring(1).split('&').forEach(function(pair) {
  pair = pair.split('=');
  if (pair[1] !== undefined) {
    var key = decodeURIComponent(pair[0]),
        val = decodeURIComponent(pair[1]),
        val = val ? val.replace(/\++/g,' ').trim() : '';

    if (key.length === 0) {
      return;
    }
    if (params[key] === undefined) {
      params[key] = val;
    }
    else {
      if ("function" !== typeof params[key].push) {
        params[key] = [params[key]];
      }
      params[key].push(val);
    }
  }
});
console.log(params);

Grundlegende Verwendung, z. B.
?a=aa&b=bb
Object {a: "aa", b: "bb"}

Doppelte Parameter, z.B..
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}

Fehlende Schlüssel, z. B.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}

Fehlende Werte, z.B..
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}

Die obigen JSON/Regex-Lösungen führen bei dieser verrückten URL zu einem Syntaxfehler:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}

Answer 5

Dies scheint die beste Lösung zu sein, da sie mehrere gleichnamige Parameter berücksichtigt.

    function paramsToJSON(str) {
        var pairs = str.split('&');
        var result = {};
        pairs.forEach(function(pair) {
            pair = pair.split('=');
            var name = pair[0]
            var value = pair[1]
            if( name.length )
                if (result[name] !== undefined) {
                    if (!result[name].push) {
                        result[name] = [result[name]];
                    }
                    result[name].push(value || '');
                } else {
                    result[name] = value || '';
                }
        });
        return( result );
    }

<a href="index.html?x=1&x=2&x=3&y=blah">something</a>
paramsToJSON("x=1&x=2&x=3&y=blah"); 

console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON

Später beschloss ich, es auch in ein jQuery-Plugin umzuwandeln...

$.fn.serializeURLParams = function() {
    var result = {};

    if( !this.is("a") || this.attr("href").indexOf("?") == -1 ) 
        return( result );

    var pairs = this.attr("href").split("?")[1].split('&');
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        var name = decodeURI(pair[0])
        var value = decodeURI(pair[1])
        if( name.length )
            if (result[name] !== undefined) {
                if (!result[name].push) {
                    result[name] = [result[name]];
                }
                result[name].push(value || '');
            } else {
                result[name] = value || '';
            }
    });
    return( result )
}

<a href="index.html?x=1&x=2&x=3&y=blah">something</a>
$("a").serializeURLParams(); 

console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON

Nun, die erste wird nur die Parameter akzeptieren, aber das jQuery-Plugin wird die ganze URL nehmen und die serialisierten Parameter zurückgeben.