Konvertieren Sie URL-Parameter in ein JavaScript-Objekt

Split auf & um name/Wert-Paare, dann split jedes paar auf =. Hier ist ein Beispiel:

var str = "abc=foo&def=%5Basf%5D&xy%5Bz=5"
var obj = str.split("&").reduce(function(prev, curr, i, arr) {
    var p = curr.split("=");
    prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
    return prev;
}, {});

Einen anderen Ansatz, die Verwendung von regulären Ausdrücken:

var obj = {}; 
str.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
    obj[decodeURIComponent(key)] = decodeURIComponent(value);
}); 

Dies ist adaptiert von John Resig ' s "Suchen und Ersetzen nicht".

InformationsquelleAutor der Antwort Wayne Burkett

Fand ich $.String.deparam die vollständigste pre gebaut-Lösung (tun können verschachtelte Objekte etc.). Überprüfen Sie heraus die Dokumentation.

InformationsquelleAutor der Antwort Daff

Andere Lösung, basierend auf dem neuesten standard der 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 ist die Nutzung von

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

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

Sollte es einfach sein, um eine kompatible Lösung, da Sie Zugang zu searchParams.Einträge() iterator.

InformationsquelleAutor der Antwort Nickey

Verwendung von ES6, URL-API und URLSearchParams API.

function objectifyQueryString(url) {
  let _url = new URL(url);
  let _params = new URLSearchParams(_url.search);
  let query = Array.from(_params.keys()).reduce((sum, value)=>{
    return Object.assign({[value]: _params.get(value)}, sum);
  }, {});
  return query;
}

InformationsquelleAutor der Antwort supergentle

Es ist ein leichtes Bibliothek namens YouAreI.js ,getestet und macht das wirklich einfach.

YouAreI = require('YouAreI')
uri = new YouAreI('http://user:[email protected]:3000/a/b/c?d=dad&e=1&f=12.3#fragment');

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

InformationsquelleAutor der Antwort steel

Hier mein quick-and-dirty-version, im Grunde ist es der Aufteilung des URL-Parameter, getrennt durch '&' in array-Elemente, und dann iteriert über das array hinzufügen von Schlüssel/Wert-Paare, getrennt durch ein '=' in ein Objekt. Ich bin mit decodeURIComponent() zur übersetzung der kodierten Zeichen in Ihre normale string-äquivalente (also %20 wird zu einem Raum, %26 wird zu '&', etc.):

function deparam(paramStr) {
    let paramArr = paramStr.split('&');     
    let paramObj = {};
    paramArr.forEach(e=>{
        let param = e.split('=');
        paramObj[param[0]] = decodeURIComponent(param[1]);
    });
    return paramObj;
}

Beispiel:

deparam('abc=foo&def=%5Basf%5D&xyz=5')

gibt

{
    abc: "foo"
    def:"[asf]"
    xyz :"5"
}

Das einzige Problem ist, dass xyz ein string ist und keine Zahl (durch die Verwendung von decodeURIComponent()), aber darüber hinaus, dass es sich nicht um einen schlechten Ausgangspunkt.

InformationsquelleAutor der Antwort Eric

Mit phpjs

function parse_str(str, array) {
  //      discuss at: http://phpjs.org/functions/parse_str/
  //     original by: Cagri Ekin
  //     improved by: Michael White (http://getsprink.com)
  //     improved by: Jack
  //     improved by: Brett Zamir (http://brett-zamir.me)
  //     bugfixed by: Onno Marsman
  //     bugfixed by: Brett Zamir (http://brett-zamir.me)
  //     bugfixed by: stag019
  //     bugfixed by: Brett Zamir (http://brett-zamir.me)
  //     bugfixed by: MIO_KODUKI (http://mio-koduki.blogspot.com/)
  //reimplemented by: stag019
  //        input by: Dreamer
  //        input by: Zaide (http://zaidesthings.com/)
  //        input by: David Pesta (http://davidpesta.com/)
  //        input by: jeicquest
  //            note: When no argument is specified, will put variables in global scope.
  //            note: When a particular argument has been passed, and the returned value is different parse_str of PHP. For example, a=b=c&d====c
  //            test: skip
  //       example 1: var arr = {};
  //       example 1: parse_str('first=foo&second=bar', arr);
  //       example 1: $result = arr
  //       returns 1: { first: 'foo', second: 'bar' }
  //       example 2: var arr = {};
  //       example 2: parse_str('str_a=Jack+and+Jill+didn%27t+see+the+well.', arr);
  //       example 2: $result = arr
  //       returns 2: { str_a: "Jack and Jill didn't see the well." }
  //       example 3: var abc = {3:'a'};
  //       example 3: parse_str('abc[a][b]["c"]=def&abc[q]=t+5');
  //       returns 3: {"3":"a","a":{"b":{"c":"def"}},"q":"t 5"}

  var strArr = String(str)
    .replace(/^&/, '')
    .replace(/&$/, '')
    .split('&'),
    sal = strArr.length,
    i, j, ct, p, lastObj, obj, lastIter, undef, chr, tmp, key, value,
    postLeftBracketPos, keys, keysLen,
    fixStr = function(str) {
      return decodeURIComponent(str.replace(/\+/g, '%20'));
    };

  if (!array) {
    array = this.window;
  }

  for (i = 0; i < sal; i++) {
    tmp = strArr[i].split('=');
    key = fixStr(tmp[0]);
    value = (tmp.length < 2) ? '' : fixStr(tmp[1]);

    while (key.charAt(0) === ' ') {
      key = key.slice(1);
    }
    if (key.indexOf('\x00') > -1) {
      key = key.slice(0, key.indexOf('\x00'));
    }
    if (key && key.charAt(0) !== '[') {
      keys = [];
      postLeftBracketPos = 0;
      for (j = 0; j < key.length; j++) {
        if (key.charAt(j) === '[' && !postLeftBracketPos) {
          postLeftBracketPos = j + 1;
        } else if (key.charAt(j) === ']') {
          if (postLeftBracketPos) {
            if (!keys.length) {
              keys.push(key.slice(0, postLeftBracketPos - 1));
            }
            keys.push(key.substr(postLeftBracketPos, j - postLeftBracketPos));
            postLeftBracketPos = 0;
            if (key.charAt(j + 1) !== '[') {
              break;
            }
          }
        }
      }
      if (!keys.length) {
        keys = [key];
      }
      for (j = 0; j < keys[0].length; j++) {
        chr = keys[0].charAt(j);
        if (chr === ' ' || chr === '.' || chr === '[') {
          keys[0] = keys[0].substr(0, j) + '_' + keys[0].substr(j + 1);
        }
        if (chr === '[') {
          break;
        }
      }

      obj = array;
      for (j = 0, keysLen = keys.length; j < keysLen; j++) {
        key = keys[j].replace(/^['"]/, '')
          .replace(/['"]$/, '');
        lastIter = j !== keys.length - 1;
        lastObj = obj;
        if ((key !== '' && key !== ' ') || j === 0) {
          if (obj[key] === undef) {
            obj[key] = {};
          }
          obj = obj[key];
        } else { //To insert new dimension
          ct = -1;
          for (p in obj) {
            if (obj.hasOwnProperty(p)) {
              if (+p > ct && p.match(/^\d+$/g)) {
                ct = +p;
              }
            }
          }
          key = ct + 1;
        }
      }
      lastObj[key] = value;
    }
  }
}

InformationsquelleAutor der Antwort Duy Hoang

ES6 one-liner. Sauber und einfach.

var obj = Array.from(new URLSearchParams(location.search).keys()).reduce((sum, value,index,arr)=>{ return Object.assign({[value]: new URLSearchParams(location.search).get(value)}, sum); }, {});

InformationsquelleAutor der Antwort rturkek

Dies scheint die beste Lösung zu sein, wie es dauert mehrere Parameter mit dem gleichen Namen in Betracht.

    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 entschied ich mich, es zu konvertieren zu einem jQuery-plugin zu...

$.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 ersten nehmen die Parameter aber nur die jQuery-plugin, wird die gesamte url und die Rückgabe der serialisierten Parameter.

InformationsquelleAutor der Antwort jQuery Junkie

Gebäude auf der Spitze Mike Verursacher Antwort ich habe eine Funktion, die berücksichtigt, mehrere Parameter mit dem gleichen Schlüssel (foo=bar&foo=baz) und auch Komma getrennte Parameter (foo=bar,baz,bin). Außerdem können Sie die Suche für eine bestimmte Suchanfrage key.

function getQueryParams(queryKey) {
    var queryString = window.location.search;
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        var key = decodeURIComponent(pair[0]);
        var value = decodeURIComponent(pair[1] || '');
        //Se possui uma vírgula no valor, converter em um array
        value = (value.indexOf(',') === -1 ? value : value.split(','));

        //Se a key já existe, tratar ela como um array
        if (query[key]) {
            if (query[key].constructor === Array) {
                //Array.concat() faz merge se o valor inserido for um array
                query[key] = query[key].concat(value);
            } else {
                //Se não for um array, criar um array contendo o valor anterior e o novo valor
                query[key] = [query[key], value];
            }
        } else {
            query[key] = value;
        }
    }

    if (typeof queryKey === 'undefined') {
        return query;
    } else {
        return query[queryKey];
    }
}

Beispiel Eingabe:
foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3

Beispiel für die Ausgabe

{
    foo: ["bar","baz","bez","boz","buz"],
    bar: ["1","2","3"]
}

InformationsquelleAutor der Antwort Gus