Fungsi invers $ .param () di JavaScript / jQuery

Diberikan bentuk berikut:

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

Saya dapat menggunakan $.param( .. )konstruksi untuk membuat serialisasi:

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

=> foo=bar&hello=hello+world

Bagaimana saya bisa menghilangkan derialisasi String di atas dengan JavaScript dan mendapatkan hash kembali?

Sebagai contoh,

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

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

Referensi: jQuery.param( obj ).

Anda harus menggunakan jQuery BBQ 's deparam fungsi. Ini teruji dan didokumentasikan dengan baik.

Ini adalah versi yang sedikit dimodifikasi dari fungsi yang saya tulis beberapa waktu lalu untuk melakukan sesuatu yang serupa.

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;
};

Bagaimana dengan pendekatan fungsional pendek ini?

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;
    }, {});
}

Contoh:

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

Jawabanku:

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;
}

Saya menggunakan jawaban David Dorward, dan menyadari bahwa itu tidak berperilaku seperti PHP atau Ruby on Rails bagaimana mereka mengurai params:

1) variabel hanya berupa larik jika diakhiri dengan [], seperti ?choice[]=1&choice[]=12, bukan saat?a=1&a=2

2) ketika ada mulitple params dengan nama yang sama, yang kemudian menggantikan yang sebelumnya, seperti pada server PHP (Ruby on Rails menyimpan yang pertama dan mengabaikan yang lebih baru), seperti ?a=1&b=2&a=3

Jadi mengubah versi David, saya punya:

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;
};

yang diuji dengan cukup teliti.

Saya tahu ini adalah utas lama, tetapi mungkin masih ada relevansinya?

Terinspirasi oleh solusi Jacky Li yang baik, saya mencoba sedikit variasi sendiri dengan tujuan untuk juga dapat menangani kombinasi sembarang array dan objek sebagai input. Saya melihat bagaimana PHP akan melakukannya dan mencoba untuk mendapatkan sesuatu yang "serupa" terjadi. Ini kode saya:

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;
}

Jika fungsi dipanggil tanpa str-argumen itu akan dianggap window.location.search.slice(1)sebagai input.

Beberapa contoh:

['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')

menghasilkan

{"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

Sedangkan solusi Jacky Li akan menghasilkan wadah luar asebagai benda biasa

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

getargs() melihat indeks pertama yang diberikan untuk setiap level untuk menentukan apakah level ini akan menjadi objek (indeks non-numerik) atau array (numerik atau kosong), sehingga menghasilkan output seperti yang ditunjukkan pada daftar di atas (no. 6).

Jika objek saat ini adalah array maka nulls bisa disisipkan dimanapun diperlukan untuk merepresentasikan posisi kosong. Array selalu diberi nomor berurutan dan berbasis 0).

Perhatikan, bahwa dalam contoh no. 8 "autoincrement" untuk indeks kosong masih berfungsi, meskipun kita berurusan dengan objek sekarang dan bukan array.

Sejauh saya telah mengujinya, getargs()perilaku saya cukup mirip dengan $.deparam() plugin jQuery hebat Chriss Roger yang disebutkan dalam jawaban yang diterima. Perbedaan utamanya adalah bahwa getargsberjalan tanpa jQuery dan itu melakukan autoincrement pada objek sementara tidak$.deparam() akan melakukannya:

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

menghasilkan

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

Dalam $.deparam()indeks []diinterpretasikan sebagai undefinedbukan indeks numerik yang bertambah otomatis.

Inilah cara Anda membuat fungsi jQuery baru:

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;
};

Terima kasih padanya http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

Cukup mudah: 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;}

Inilah implementasi JavaScript saya yang saya gunakan di halaman JScript ASP Classic sisi server ( demo ):

// 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;
}

Gunakan ini :

// 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);

Saya datang dengan solusi ini, yang berperilaku seperti fungsi .Net HttpUtility.ParseQueryString.

Hasilnya, parameter string kueri disimpan di properti sebagai daftar nilai, sehingga qsObj["param"]akan sama dengan memanggil GetValues("param").Net.

Saya harap Anda menyukainya. JQuery tidak diperlukan.

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;
};

Berikut cara menggunakannya:

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

Untuk melihat hasil di konsol, ketik saja:

JSON.stringify(qsObj)

Keluaran:

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

Ada satu kalimat yang indah di CSS-Tricks (sumber asli dari 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];
}

Bagian yang paling pintar adalah bagaimana ia menggunakan objek fungsi anonim this, menambahkan pasangan kunci / nilai untuk setiap kueri dalam string. Meskipun demikian, masih ada ruang untuk perbaikan. Saya telah mengubahnya sedikit di bawah ini, dengan perubahan berikut:

1. Menambahkan penanganan string kosong dan input non-string.

2. Menangani string berenkode URI ( %40-> @, dll).

3. Menghapus penggunaan default document.location.searchsaat input kosong.

4. Mengganti nama, membuatnya lebih mudah dibaca, menambahkan komentar.

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];
}

Ini benar-benar pertanyaan lama, tetapi karena saya telah datang - orang lain mungkin datang ke posting ini, dan saya ingin sedikit menyegarkan tema ini. Saat ini tidak perlu membuat solusi khusus - ada antarmuka 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);
}

Satu-satunya batasan yang saya tahu - fitur ini tidak didukung di IE / Edge.

Ini adalah versi saya di Coffeescript. Juga berfungsi untuk url seperti 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

Ini yang sederhana & ringkas jika Anda hanya ingin cepat mendapatkan parameter dari permintaan 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;
}

Itu mengubah

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

menjadi objek seperti

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

Membuat representasi serial dari larik atau objek (dapat digunakan sebagai string kueri URL untuk permintaan 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

jawaban bisa menggunakan sedikit keanggunan 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);

garpu di https://gist.github.com/956897

Anda dapat menggunakan fungsi .serializeArray()( Tautan ) dari jQuery itu sendiri. Fungsi ini mengembalikan larik pasangan nilai kunci. Contoh hasil:

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