La fonction inverse $ .param () dans JavaScript / jQuery

Compte tenu de la forme suivante:

<form>
    <input name="foo" value="bar">
    <input name="hello" value="hello world">
</form>

Je peux utiliser la $.param( .. )construction pour sérialiser le formulaire:

$.param( $('form input') )

=> foo=bar&hello=hello+world

Comment désérialiser la chaîne ci-dessus avec JavaScript et récupérer un hachage?

Par exemple,

$.magicFunction("foo=bar&hello=hello+world")

=> {'foo' : 'bar', 'hello' : 'hello world'}

Référence: jQuery.param( obj ).

Vous devez utiliser jQuery BBQ de deparam fonction. C'est bien testé et documenté.

Ceci est une version légèrement modifiée d'une fonction que j'ai écrite il y a quelque temps pour faire quelque chose de similaire.

var QueryStringToHash = function QueryStringToHash  (query) {
  var query_string = {};
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
  return query_string;
};

Qu'en est-il de cette courte approche fonctionnelle?

function parseParams(str) {
    return str.split('&').reduce(function (params, param) {
        var paramSplit = param.split('=').map(function (value) {
            return decodeURIComponent(value.replace(/\+/g, ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}

Exemple:

parseParams("this=is&just=an&example") // Object {this: "is", just: "an", example: undefined}

Ma réponse:

function(query){
  var setValue = function(root, path, value){
    if(path.length > 1){
      var dir = path.shift();
      if( typeof root[dir] == 'undefined' ){
        root[dir] = path[0] == '' ? [] : {};
      }

      arguments.callee(root[dir], path, value);
    }else{
      if( root instanceof Array ){
        root.push(value);
      }else{
        root[path] = value;
      }
    }
  };
  var nvp = query.split('&');
  var data = {};
  for( var i = 0 ; i < nvp.length ; i++ ){
    var pair = nvp[i].split('=');
    var name = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);

    var path = name.match(/(^[^\[]+)(\[.*\]$)?/);
    var first = path[1];
    if(path[2]){
      //case of 'array[level1]' || 'array[level1][level2]'
      path = path[2].match(/(?=\[(.*)\]$)/)[1].split('][')
    }else{
      //case of 'name'
      path = [];
    }
    path.unshift(first);

    setValue(data, path, value);
  }
  return data;
}

J'utilise la réponse de David Dorward et je me suis rendu compte qu'il ne se comporte pas comme PHP ou Ruby on Rails comment ils analysent les paramètres:

1) une variable n'est un tableau que si elle se termine par [], par exemple ?choice[]=1&choice[]=12, pas quand elle est?a=1&a=2

2) quand plusieurs paramètres existent avec le même nom, les derniers remplacent les premiers, comme sur les serveurs PHP (Ruby on Rails garde le premier et ignore les derniers), comme ?a=1&b=2&a=3

Alors en modifiant la version de David, j'ai:

function QueryStringToHash(query) {

  if (query == '') return null;

  var hash = {};

  var vars = query.split("&");

  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var k = decodeURIComponent(pair[0]);
    var v = decodeURIComponent(pair[1]);

    // If it is the first entry with this name
    if (typeof hash[k] === "undefined") {

      if (k.substr(k.length-2) != '[]')  // not end with []. cannot use negative index as IE doesn't understand it
        hash[k] = v;
      else
        hash[k.substr(0, k.length-2)] = [v];

    // If subsequent entry with this name and not array
    } else if (typeof hash[k] === "string") {
      hash[k] = v;  // replace it

    // If subsequent entry with this name and is array
    } else {
      hash[k.substr(0, k.length-2)].push(v);
    }
  } 
  return hash;
};

qui est testé de manière assez approfondie.

Je sais que c'est un vieux fil, mais peut-être qu'il y a encore une certaine pertinence?

Inspiré par la bonne solution de Jacky Li, j'ai essayé une légère variation de ma part avec l'objectif de pouvoir également prendre en charge des combinaisons arbitraires de tableaux et d'objets en entrée. J'ai regardé comment PHP l'aurait fait et j'ai essayé d'obtenir quelque chose de "similaire". Voici mon code:

function getargs(str){
   var ret={};
   function build(urlnam,urlval,obj){ // extend the return object ...
    var i,k,o=obj, x, rx=/\[([^\]]*)\]/g, idx=[urlnam.replace(rx,'')];
    while (x=rx.exec(urlnam)) idx.push(x[1]); 
    while(true){
     k=idx.shift();
     if(k.trim()=='') {// key is empty: autoincremented index
       if (o.constructor.name=='Array') k=o.length; // for Array
       else if (o===obj ) {k=null}  // for first level property name
       else {k=-1;                                  // for Object
         for(i in o) if (+i>k) k=+i;
         k++;
       }
     }
     if(idx.length) { 
       // set up an array if the next key (idx[0]) appears to be
       // numeric or empty, otherwise set up an object:
       if (o[k]==null || typeof o[k]!='object') o[k]=isNaN(idx[0])?{}:[]; 
       o=o[k]; // move on to the next level
     }
     else { // OK, time to store the urlval in its chosen place ...
       // console.log('key',k,'val',urlval);                 
       o[k]=urlval===""?null:urlval; break; // ... and leave the while loop.
     } 
    }
    return obj;
   }
   // ncnvt: is a flag that governs the conversion of
   // numeric strings into numbers
   var ncnvt=true,i,k,p,v,argarr=[],
       ar=(str||window.location.search.substring(1)).split("&"),
       l=ar.length;
   for (i=0;i<l;i++) {if (ar[i]==="") continue;
     p=ar[i].split("=");k=decodeURIComponent(p[0]);
     v=p[1];v=(v!=null)?decodeURIComponent(v.replace(/\+/g,'%20')):'';
     if (ncnvt && v.trim()>"" && !isNaN(v)) v-=0;
     argarr.push([k,v]);  // array: key-value-pairs of all arguments
   }
   for (i=0,l=argarr.length;i<l;i++) build(argarr[i][0],argarr[i][1],ret);
   return ret;
}

Si la fonction est appelée sans l' strargument, elle sera considérée window.location.search.slice(1)comme une entrée.

Quelques exemples:

['a=1&a=2',                               // 1
 'x[y][0][z][]=1',                        // 2
 'hello=[%22world%22]&world=hello',       // 3
 'a=1&a=2&&b&c=3&d=&=e&',                 // 4
 'fld[2][]=2&fld[][]=3&fld[3][]=4&fld[]=bb&fld[]=cc',  // 5
 $.param({a:[[1,2],[3,4],{aa:'one',bb:'two'},[5,6]]}), // 6
 'a[]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13',// 7
 'a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13'// 8
].map(function(v){return JSON.stringify(getargs(v));}).join('\n')

résulte en

{"a":2}                                    // 1
{"x":{"y":[{"z":[1]}]}}                    // 2
{"hello":"[\"world\"]","world":"hello"}    // 3
{"a":2,"b":null,"c":3,"d":null,"null":"e"} // 4 = { a: 2, b: null, c: 3, d: null, null: "e" }
{"fld":[null,null,[2],[3,4],"bb","cc"]}    // 5 
{"a":[[1,2],[3,4],{"aa":"one","bb":"two"},[5,6]]}  // 6
{"a":["hi",2,null,[7,99],13]}              // 7
{"a":{"0":2,"3":[7,99],"4":13,"x":"hi"}}   // 8

Alors que la solution de Jacky Li produirait le conteneur extérieur acomme un objet simple

{a:{"0":["1","2"],"1":["3","4"],"2":["5","6"]}} // 6: JackyLi's output

getargs() regarde le premier index donné pour n'importe quel niveau pour déterminer si ce niveau sera un objet (index non numérique) ou un tableau (numérique ou vide), résultant ainsi en la sortie comme indiqué dans la liste ci-dessus (n ° 6).

Si l'objet courant est un tableau, les nulls sont insérés là où c'est nécessaire pour représenter des positions vides. Les tableaux sont toujours numérotés et basés sur 0).

Notez que dans l'exemple no. 8 "l'auto-incrémentation" pour les index vides fonctionne toujours, même si nous avons affaire à un objet maintenant et non à un tableau.

Pour autant que je l'ai testé, mon getargs()comportement est à peu près identique au grand $.deparam() plugin jQuery de Chriss Roger mentionné dans la réponse acceptée. La principale différence est que getargss'exécute sans jQuery et qu'il effectue l' auto - incrémentation dans les objets alors $.deparam()qu'il ne le fera pas :

JSON.stringify($.deparam('a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13').a);

résulte en

{"3":["7","99"],"x":"hi","undefined":"13"}

Dans $.deparam()l'index []est interprété comme un undefinedindex numérique auto-incrémenté au lieu d'un index.

Voici comment créer une nouvelle fonction jQuery:

jQuery.unparam = function (value) {
    var
    // Object that holds names => values.
    params = {},
    // Get query string pieces (separated by &)
    pieces = value.split('&'),
    // Temporary variables used in loop.
    pair, i, l;

    // Loop through query string pieces and assign params.
    for (i = 0, l = pieces.length; i < l; i++) {
        pair = pieces[i].split('=', 2);
        // Repeated parameters with the same name are overwritten. Parameters
        // with no value get set to boolean true.
        params[decodeURIComponent(pair[0])] = (pair.length == 2 ?
            decodeURIComponent(pair[1].replace(/\+/g, ' ')) : true);
    }

    return params;
};

Merci à lui http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

Assez facile: D

function params_unserialize(p){
var ret = {},
    seg = p.replace(/^\?/,'').split('&'),
    len = seg.length, i = 0, s;
for (;i<len;i++) {
    if (!seg[i]) { continue; }
    s = seg[i].split('=');
    ret[s[0]] = s[1];
}
return ret;}

Voici mon implémentation JavaScript que j'utilise dans une page JScript ASP Classic côté serveur ( démo ):

// Transforms a query string in the form x[y][0][z][]=1 into {x:{y:[{z:[1]}]}}
function parseJQueryParams(p) {
    var params = {};
    var pairs = p.split('&');
    for (var i=0; i<pairs.length; i++) {
        var pair = pairs[i].split('=');
        var indices = [];
        var name = decodeURIComponent(pair[0]),
            value = decodeURIComponent(pair[1]);

        var name = name.replace(/\[([^\]]*)\]/g, 
            function(k, idx) { indices.push(idx); return ""; });

        indices.unshift(name);
        var o = params;

        for (var j=0; j<indices.length-1; j++) {
            var idx = indices[j];
            var nextIdx = indices[j+1];
            if (!o[idx]) {
                if ((nextIdx == "") || (/^[0-9]+$/.test(nextIdx)))
                    o[idx] = [];
                else
                    o[idx] = {};
            }
            o = o[idx];
        }

        idx = indices[indices.length-1];
        if (idx == "") {
            o.push(value);
        }
        else {
            o[idx] = value;
        }
    }
    return params;
}

utilisez ceci :

// convert query string to json object
var queryString = "cat=3&sort=1&page=1";

queryString
    .split("&")
    .forEach((item) => {
        const prop = item.split("=");
        filter[prop[0]] = prop[1];
    });

console.log(queryString);

J'ai trouvé cette solution, qui se comporte comme la fonction .Net HttpUtility.ParseQueryString.

Dans le résultat, les paramètres de la chaîne de requête sont stockés dans les propriétés sous forme de listes de valeurs, ce qui qsObj["param"]équivaut donc à appeler GetValues("param")dans .Net.

J'espère que tu aimes. JQuery n'est pas requis.

var parseQueryString = function (querystring) {
    var qsObj = new Object();
    if (querystring) {
        var parts = querystring.replace(/\?/, "").split("&");
        var up = function (k, v) {
            var a = qsObj[k];
            if (typeof a == "undefined") {
                qsObj[k] = [v];
            }
            else if (a instanceof Array) {
                a.push(v);
            }
        };
        for (var i in parts) {
            var part = parts[i];
            var kv = part.split('=');
            if (kv.length == 1) {
                var v = decodeURIComponent(kv[0] || "");
                up(null, v);
            }
            else if (kv.length > 1) {
                var k = decodeURIComponent(kv[0] || "");
                var v = decodeURIComponent(kv[1] || "");
                up(k, v);
            }
        }
    }
    return qsObj;
};

Voici comment l'utiliser:

var qsObj = parseQueryString("a=1&a=2&&b&c=3&d=&=e&");

Pour prévisualiser le résultat dans la console, tapez simplement:

JSON.stringify(qsObj)

Production:

"{"a":["1","2"],"null":["","b",""],"c":["3"],"d":[""],"":["e"]}"

Il y a un beau one-liner sur CSS-Tricks (source originale de Nicholas Ortenzio ):

function getQueryParameters(str) {
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}

La partie la plus intelligente est la façon dont il utilise la fonction anonyme this objet de , en ajoutant une paire clé / valeur pour chacune des requêtes de la chaîne. Cela dit, il y a place à amélioration. Je l'ai modifié un peu ci-dessous, avec les changements suivants:

1. Ajout de la gestion des chaînes vides et des entrées non-chaîne.

2. Chaînes codées URI gérées ( %40->@ , etc.).

3. Suppression de l'utilisation par défaut de document.location.search moment où l'entrée était vide.

4. Changement de nom, rendu plus lisible, ajout de commentaires.

function deparam(str) {
    // Uses an empty 'this' to build up the results internally
    function splitQuery(query) {
        query = query.split('=').map(decodeURIComponent);
        this[query[0]] = query[1];
        return this;
    }

    // Catch bad input
    if (!str || !(typeof str === 'string' || str instanceof String))
        return {};

    // Split the string, run splitQuery on each piece, and return 'this'
    var queries = str.replace(/(^\?)/,'').split('&');
    return queries.map(splitQuery.bind({}))[0];
}

C'est une question vraiment ancienne, mais comme je viens - d'autres personnes peuvent venir à ce post, et je veux rafraîchir un peu ce thème. Aujourd'hui, pas besoin de faire des solutions personnalisées - il existe une interface URLSearchParams .

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

La seule limitation que je connaisse - cette fonctionnalité n'est pas prise en charge dans IE / Edge.

Ceci est ma version dans Coffeescript. Fonctionne également pour les URL comme http://localhost:4567/index.html?hello=[%22world%22]&world=hello#/home

getQueryString: (url)->
    return null if typeof url isnt 'string' or url.indexOf("http") is -1

    split = url.split "?"

    return null if split.length < 2 
    path = split[1]

    hash_pos = path.indexOf "#"
    path = path[0...hash_pos] if hash_pos isnt -1

    data = path.split "&"
    ret = {}
    for d in data
      [name, val] = d.split "=" 
      name = decodeURIComponent name
      val = decodeURIComponent val
      try 
        ret[name] = JSON.parse val
      catch error
        ret[name] = val
    return ret

En voici un simple et compact si vous souhaitez uniquement obtenir rapidement les paramètres d'une requête GET:

function httpGet() {
    var a={},b,i,q=location.search.replace(/^\?/,"").split(/\&/);
    for(i in q) if(q[i]) {b=q[i].split("=");if(b[0]) a[b[0]]=
    decodeURIComponent(b[1]).replace(/\+/g," ");} return a;
}

Il convertit

something?aa=1&bb=2&cc=3

dans un objet comme

{aa:1,bb:2,cc:3}

Crée une représentation sérialisée d'un tableau ou d'un objet (peut être utilisée comme chaîne de requête URL pour les requêtes AJAX).

<button id='param'>GET</button> 
<div id="show"></div>
<script>
  $('#param').click(function () {
    var personObj = new Object();
    personObj.firstname = "vishal"
    personObj.lastname = "pambhar";
    document.getElementById('show').innerHTML=$.param(`personObj`));
  });
</script>
output:firstname=vishal&lastname=pambhar

les réponses pourraient utiliser un peu d' élégance jQuery :

(function($) {
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g; // Regex for replacing addition symbol with a space
var decode = function (str) {return decodeURIComponent( str.replace(decodeRE, " ") );};
$.parseParams = function(query) {
    var params = {}, e;
    while ( e = re.exec(query) ) {
        var k = decode( e[1] ), v = decode( e[2] );
        if (k.substring(k.length - 2) === '[]') {
            k = k.substring(0, k.length - 2);
            (params[k] || (params[k] = [])).push(v);
        }
        else params[k] = v;
    }
    return params;
};
})(jQuery);

fourchette à https://gist.github.com/956897

Vous pouvez utiliser la fonction .serializeArray()( Link ) de jQuery lui-même. Cette fonction renvoie un tableau de paires clé-valeur. Exemple de résultat:

[
  { name: "id", value: "1" },
  { name: "version", value: "100" }
]