জাভাস্ক্রিপ্ট / jQuery এ para। পরিম () বিপরীত ফাংশন


122

নিম্নলিখিত ফর্ম দেওয়া:

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

আমি $.param( .. )ফর্মটি সিরিয়াল করতে কনস্ট্রাক্টটি ব্যবহার করতে পারি :

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

=> foo=bar&hello=hello+world

আমি কীভাবে জাভাস্ক্রিপ্ট দিয়ে উপরের স্ট্রিংকে ডিসরিয়ালাইজ করতে এবং একটি হ্যাশ ফিরে পেতে পারি?

উদাহরণ স্বরূপ,

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

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

রেফারেন্স: jQuery.param( obj )


2
আরে, আমি এই মন্তব্যটি কেবল যুক্ত করছি যাতে আপনি কোডটিতে আমার করা আপডেটটি দেখতে পেতে পারেন, আপনি যদি এটি ব্যবহার করছেন তবে ... আমি দুর্ঘটনাক্রমে এটি লিখেছিলাম যাতে এটি কেবল প্রথমটিকে প্রতিস্থাপন করে +। এখন এটি তাদের সকলকে প্রতিস্থাপন করে!
Blixt

প্লাগইন বলা হয় QueryString। আমি একটি তৈরি করেছি তবে এটি প্যারামিটারগুলি গ্রহণ করে না, এটি কেবল উইন্ডো.লোকেশন.সার্চ থেকে পড়ে। আমি অন্যদের মনে করি যারা পরামিতিগুলি গ্রহণ করে ...
ব্রুনোএলএম

1
নির্ভরতা ছাড়া NPM মডিউল রূপে রি-ফ্যাক্টর jQuery JadurKathi.com বাংলাদেশের deparam () মেথড npmjs.com/package/deparam
alexey2baranov

আলেক্সি ২ বারানভ কীভাবে এনপিএম ছাড়াই দেদারাম () রিপ্যাক্টরিং নির্ভরতা হিসাবে? :)
অ্যান্ড্রু

উত্তর:


62

আপনার jQuery বিবিকিউ এর দেদারাম ফাংশন ব্যবহার করা উচিত । এটি ভাল-পরীক্ষিত এবং নথিভুক্ত।


চমৎকার প্লাগইন! ভাগ করে নেওয়ার জন্য ধন্যবাদ.
জোনাথন

29
আপনি যদি পুরো বিবিকিউ প্লাগইনটি পেতে না চান, তবে দেদারাম ফাংশনটি এখানে স্ট্যান্ড্যালোন প্লাগইন হিসাবে সরানো হয়েছিল: github.com/chrissrogers/jquery-Deparam
ফিলিপ কাস্ত্রো

2
দুর্ভাগ্যক্রমে গিথুব পৃষ্ঠাটি বছরগুলিতে কোনও আপডেট দেখেনি, এবং যখন আমি চেষ্টা করেছি এটি সর্বশেষতম jQuery এর সাথে সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে না ... দেখে মনে হচ্ছে আমার যা প্রয়োজন তাই like
pilavdzice

31

অনুরূপ কিছু করতে কিছুক্ষণ আগে লিখেছি এমন একটি ফাংশনের এটি সামান্য পরিবর্তিত সংস্করণ।

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

1
গ্রহণযোগ্য উত্তরের সাথে ঠিক কী আমি ভেবেছিলাম "এটি অ্যারে দিয়ে কাজ করবে না"। আপনার সমাধান ঠিকঠাক কাজ করে।
রবার্ট কোরিটনিক

20

এই সংক্ষিপ্ত ক্রিয়ামূলক পদ্ধতির সম্পর্কে কীভাবে?

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

উদাহরণ:

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

1
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, কোনও বাহ্যিক নির্ভরতা নেই।
মাইকেল রবিনসন

সহজ, নির্ভরযোগ্য এবং শক্তিশালী সমাধান। শ্রদ্ধা, স্যার।
fmquaglia

5
এটি যা করে তার জন্য এটি অবশ্যই একটি ভাল সমাধান। তবে এটি অ্যারে বা অবজেক্টগুলি পাস করার বিষয়ে যত্ন নেয় না। ইউআরএল যেখানে হওয়া উচিত সেখানে field[][]=a&field[0][]=b&field[0][]=cপ্রক্রিয়াজাত হয় । এটি পিএইচপি থেকে প্রত্যাশিত আচরণ @ জ্যাকিলির সমাধানটি সেদিকে খেয়াল রাখে। Object { field[][]: "a", field[0][]: "c" }resultobject.field[0] = Array [ "a", "b", "c" ]
কার

16

আমার উত্তর:

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

হ্যাঁ! হ্যাঁ! হ্যাঁ! Qu .জ্যাক্স কলটিতে জ্যাকুয়ারি কর্তৃক প্রেরিত প্যারামগুলি পার্স করার জন্য আমার ঠিক এটিই দরকার। এটি সঠিকভাবে নেস্টেড হ্যাশগুলি প্রদান করে। অনেক ধন্যবাদ, জ্যাকি লি!
পাস্কাল লিন্ডেলুফ

এখন পর্যন্ত সেরা সমাধান - এটি বেশ ভাল আচরণ করে ! তবে যখন আমি ব্যবহার JSON.stringify(geturlargs('fld[2][]=2&fld[][]=3&fld[3][]=4&fld[]=bb&fld[]=cc').fld)করি তখন যা পাই {"2":["2"],"3":["4"],"":"cc"}এবং [null,null,[2],[3,4],"bb","cc"]যা আশা করি তা নয় (পিএইচপি আমাকে দিবে)।
10m

1
এটি সঠিক উত্তর এবং দয়া করে অন্য সমস্ত আনাগোনা উপেক্ষা করুন, তারা সঠিকভাবে কাজ করে না
অ্যান্ড্রু

1
এই উত্তরটি কেবলমাত্র আমার নির্দিষ্ট ব্যবহারের ক্ষেত্রেই সম্বোধন করেছে (যেখানে আমি নেস্টেড কী / মানগুলির সাথে জিকুয়েরির $। পরিমায় মান দিয়েছি, এটি সঠিকভাবে পুনরুদ্ধারের পরে এই মানগুলিকে হাইড্রেট করে)।
ডিলাইনার

9

আমি ডেভিড ডারওয়ার্ডের উত্তরটি ব্যবহার করছি এবং বুঝতে পেরেছি যে এটি পিএলপি বা রুবির মতো ব্যবহার করে না, তারা কীভাবে পারামগুলি পার্স করে:

1) ভেরিয়েবলটি কেবলমাত্র একটি অ্যারে হয় যদি এটির সাথে শেষ হয় [], যেমন ?choice[]=1&choice[]=12এটি যখন হয় না?a=1&a=2

২) যখন বহু নামগুলি একই নামের সাথে বিদ্যমান থাকে, তখন পিএইচপি সার্ভারের মতো পরবর্তীগুলি প্রতিস্থাপন করে (রুবে অন রেল প্রথম রাখে এবং পরবর্তীগুলি অগ্রাহ্য করে), যেমন ?a=1&b=2&a=3

তাই ডেভিডের সংস্করণটি সংশোধন করে আমার কাছে রয়েছে:

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

যা মোটামুটি ভালভাবে পরীক্ষা করা হয়।


ইউরি স্পেকটি হল? A = 1 এবং a = 2 একটি অ্যারে হওয়া উচিত। রুবে অন রেল এবং পিএইচপি প্রকৃত স্পেসিফিকেশন অনুসরণ করে না।
adiktofsugar

অ্যারেতে আপনি যে লাইনটি যুক্ত করবেন তা হওয়া উচিত hash[k.substr(0, k.length-2)] = [v];এবংhash[k.substr(0, k.length-2)].push(v);
ব্যাপটিস্ট পার্নেট

এটি এনপিএমের মাধ্যমে উপলভ্য করা সম্ভব হলে ভাল হবে
এরিক ভ্যান ভেলজেন

7

আমি জানি এটি একটি পুরানো থ্রেড, তবে এটিতে এখনও কিছুটা প্রাসঙ্গিকতা থাকতে পারে?

জ্যাকি লি'র ভাল সমাধান দ্বারা অনুপ্রাণিত হয়ে আমি ইনপুট হিসাবে অ্যারে এবং অবজেক্টের স্বেচ্ছাসেবীর সংমিশ্রণের যত্ন নিতে সক্ষম হওয়ার লক্ষ্যে আমার নিজের কিছুটা প্রকারের চেষ্টা করেছি। আমি পিএইচপি কীভাবে এটি করত তা দেখেছি এবং কিছু "অনুরূপ" হওয়ার চেষ্টা করেছি। আমার কোডটি এখানে:

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

যদি ফাংশনটি str-আরগমেন্ট ছাড়াই ডাকা হয় তবে এটি window.location.search.slice(1)ইনপুট হিসাবে ধরে নেওয়া হবে ।

কিছু উদাহরণ:

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

ফলাফল স্বরূপ

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

যেখানে জ্যাকি লি'র সমাধানটি aপ্লেইন অবজেক্ট হিসাবে বাইরের ধারক তৈরি করবে

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

getargs() এই স্তরটি কোনও অবজেক্ট (অ-সংখ্যাসূচক সূচক) বা কোনও অ্যারে (সংখ্যাসূচক বা খালি) হবে কিনা তা নির্ধারণের জন্য প্রথম প্রদত্ত সূচকটি দেখায়, ফলস্বরূপ তালিকাটি বোভের (নং 6) হিসাবে প্রদর্শিত আউটপুট তৈরি হবে।

যদি বর্তমান অবজেক্টটি একটি অ্যারে হয় তবে nullখালি অবস্থানগুলি উপস্থাপনের জন্য যেখানে প্রয়োজন সেখানে getোকানো হবে। অ্যারেগুলি সর্বদা ধারাবাহিকভাবে সংখ্যাযুক্ত এবং 0-ভিত্তিক থাকে)।

দ্রষ্টব্য, যে উদাহরণে না। 8 খালি সূচকগুলির জন্য "স্বতঃসংশোধন" এখনও কাজ করে, যদিও আমরা এখন কোনও বস্তুর সাথে কাজ করছি এবং অ্যারে নয়।

যতদূর আমি এটি পরীক্ষা করে দেখেছি, আমার গ্রহণযোগ্য উত্তরে উল্লিখিত getargs()ক্রিস রজারের দুর্দান্ত জিকুয়েরি $.deparam() প্লাগইনটির সাথে আমার অনেকটা একইরকম আচরণ হচ্ছে । মূল পার্থক্য হল getargs, jQuery ছাড়া রান এবং এটা করে বস্তু যখন autoincrement $.deparam()হবে না যে কি:

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

ফলাফল স্বরূপ

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

ইন $.deparam()সূচক []একটি হিসাবে ব্যাখ্যা করা হয় undefinedএকটি autoincremented সংখ্যাসূচক সূচক পরিবর্তে।


এই দুর্দান্ত ফাংশন জন্য ধন্যবাদ। তবে আমি লক্ষ করেছি যে আপনি যদি অ্যারেতে কী হিসাবে সংখ্যাটি ব্যবহার করেন, যেমন '? A [5] [] = x' এর মতো কীটি বস্তু তৈরি করার সময় নম্বর হিসাবে ব্যবহৃত হয় এবং এটি আমার ক্ষেত্রে 5 টি খালি উপাদান তৈরি করে। এটি স্ট্রিং হিসাবে সংখ্যাসূচক কী হিসাবে বিবেচিত হবে এবং এভাবে "5" (উদ্ধৃতি সহ) কী এবং x হিসাবে মান হিসাবে বস্তু তৈরি করবে। আমি ইউআরএলকে '? A ["5"] [] = x' হতে বাধ্য করতে পারি তবে এটি কুৎসিত ...
এন্ড্রু

@ অ্যান্ড্রু: এটি আমার পক্ষ থেকে ইচ্ছাকৃতভাবে নকশার সিদ্ধান্ত ছিল: যতদূর আমি মনে করি, জ্যাকের সমাধান আপনি যেভাবে প্রত্যাশা করেছেন তার সাথে আরও আচরণ করবে। আমি o[k]=isNaN(idx[0])?{}:[];অ্যারে তৈরির উদ্দেশ্য নিয়ে লাইনটি প্রবর্তন করেছি , যখনই আমি একটি নতুন অবজেক্টের জন্য প্রদত্ত প্রথম হিসাবে একটি সংখ্যার সূচকের মুখোমুখি হই। অন্যথায় আমি একটি জেনেরিক বস্তু তৈরি করব। আপনার প্রয়োজন অনুসারে আরও ভাল করে কোডটির সেই অংশটি সংশোধন করা আপনার উপর নির্ভর করে। আই। ই। কৌশল কিছু করা o[k]={}উচিত।
মি

ধন্যবাদ। পিএস আপনাকে অবশ্যই আপনার ফাংশনের মাঝখানে কনসোল.লগটি সরিয়ে ফেলতে হবে;)
অ্যান্ড্রু

@ অ্যান্ড্রু: ধন্যবাদ, কেবল এটি মন্তব্য করে। আমি কোড পোস্ট করার সময় অবশ্যই এটি উপেক্ষা করা উচিত।
কার 10 মি

6

আপনি কীভাবে একটি নতুন 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;
};

4
আমি এই ফাংশন পছন্দ করি না। কেন কোনও মানবিহীন প্যারামিটারগুলিতে 'সত্য' এর মান পাওয়া উচিত? নাল কেন? আমি মনে করি এই নকশার সিদ্ধান্তটি খুব সূক্ষ্ম বাগগুলিতে নিয়ে যেতে পারে। এছাড়াও, প্যারামিটারের 'শেষ' মানটি নির্বাচন না করে একাধিক মান থাকতে পারে এমন পরিস্থিতিটি কেন পরিচালনা করবেন না? ডেভিড পোস্ট সলিউশন অনেক ভাল।
সমাধান

4
এটি trueযাতে কেউ চেক if (params.redirect)বা অনুরূপ করতে পারে is যদি আপনি trueএবং অন্যান্য মানের মধ্যে পার্থক্য করতে চান তবে আপনি ব্যবহার করতে পারেন if (params.redirect === true)। একটি nullমান আমি যেভাবে ভাবতে পারি তাতে কোনওভাবেই সহায়তা করে না। আমি ডেভিডের মতো এটি না করার কারণ হ'ল নমনীয়তার চেয়ে আমি ধারাবাহিকতার মূল্যবান। তার পদ্ধতির সাহায্যে আমাকে মানটি স্ট্রিং বা একটি অ্যারের মানটি ব্যবহার করতে হবে কিনা তা পরীক্ষা করে দেখতে হবে। আমার মতে, এটি সর্বদা একটি স্ট্রিং হওয়া উচিত ( trueমানটি রূপান্তরিত হয় 'true'যা আমি ভাল বলে মনে করি), বা সর্বদা অ্যারে হওয়া উচিত। আমি স্ট্রিং বেছে নিয়েছি।
Blixt

সেই অ্যাকাউন্টটি দ্বারা, যদি এটি params.delete ছিল, এটি সত্যতে সেট করা হবে এবং আমি ক্ষতিকারক কিছু করব। আপনি দেখতে পাচ্ছেন, উদাহরণ সহকারে আসা সহজ। 'নাল' স্পষ্টভাবে নির্দিষ্ট করে যে কোনও মান বিদ্যমান নেই এবং সিদ্ধান্তটি কলকারীর কাছে রেখে দেওয়া হয় যে তিনি কীভাবে এটি ব্যাখ্যা করতে চান। একাধিক মান সম্পর্কে, এইভাবে দেখুন। খাওয়া দ্বারা, আপনি নিশ্চিত হয়ে উঠছেন যে যে কোনও ফোনকারী কেন কেবলমাত্র একটি মূল্য পাচ্ছেন বা পরে এসে কোডটি সংশোধন করুন কেন এটি ডিবাগ করতে সময় ব্যয় করবে। অ্যারেটিকে সামনের দিকে ফিরিয়ে দিয়ে, কলার সাথে সাথে সেগুলি কীভাবে পরিচালনা করবেন তা জানতে পারবেন know আইএমএইচও, তথ্য বাতিল করা কখনই ভাল হয় না।
সমাধান

2
যদি ইউআরএল হয় /abc?deleteতবে আমি সেখানে প্রবেশের জন্য আশা করব delete। আমি দেখতে পাচ্ছি না যে কিভাবে ভিন্ন? আপনি এই কারণে অন্যান্য কোডটি কীভাবে পছন্দ করতে পারবেন তা আমি দেখতে পাচ্ছি না কারণ সেই কোডটি স্ট্রিংয়ের মান নির্ধারণ করবে 'undefined'যা ভাল নয়। এবং একাধিক মান হিসাবে এটি সরলতা বনাম নমনীয়তার একটি কেস। আমি খুব কমই ক্যোয়ারী স্ট্রিংয়ে একাধিক মান ব্যবহার করতে দেখি, তবে আপনি যদি এগুলি চান তবে সর্বদা 1+ মান সহ একটি অ্যারে ফিরিয়ে দিন। রিটার্নের ধরণটি কখনও মিশ্রিত করবেন না; তারপরে আপনাকে ডিবাগ করার জন্য সময় ব্যয় করতে হবে কারণ সাধারণত যা স্ট্রিং ছিল তা হঠাৎ অ্যারে হতে পারে।
Blixt

ধন্যবাদ। আমার মনে হয় না রুপোর বুলেট আছে। আমি আপনার কোডটি নিয়েছি এবং এটি কিছুটা সংশোধন করেছি, বুলিয়ান মানগুলি সরিয়েছি, অ্যারে-পরামিতিগুলির পার্সিং যুক্ত করেছি। ? foo [] = 1 & foo [] = 2 =>
ফু

6

তাকে ধন্যবাদ http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

খুব সহজ: ডি

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

2
এটি একাধিক বিকল্পের সাথে নির্বাচিত বাক্সগুলির সাথে কাজ করে না, কারণ এটি কেবল সর্বশেষ নির্বাচিত রাখে।
ফার্নান্দো ফ্যাব্রেতি

দুঃখিত তবে মন্তব্যটিতে আপনি যে বক্তব্যটি উল্লেখ করছেন তা আমি দেখতে পাচ্ছি না। এখানে উল্লিখিত ফাংশনটি হ'ল ?something=1&param2=value2একটি অ্যারের মতো প্যারামগুলির সাথে একটি ইউআরআই আনসিরিয়ালাইজ / পার্স করা। "একাধিক বিকল্পের সাথে নির্বাচিত বাক্সগুলির সাথে কাজ করবেন না" এর অর্থ কী?
ব্রেফস্কাট

4

এখানে আমার জাভাস্ক্রিপ্ট বাস্তবায়ন যা আমি সার্ভার-সাইড JScript এএসপি ক্লাসিক পৃষ্ঠা ( ডেমো ) এ ব্যবহার করি:

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

এখনও অবধি নেস্টেড অ্যারেগুলির জন্য আমি সবচেয়ে ভাল খুঁজে পেয়েছি
ymakux


1

আমি এই সমাধানটি নিয়ে এসেছি, যা HttpUtility.ParseQueryString। নেট ফাংশনের মতো আচরণ করে ।

ফলস্বরূপ, ক্যোরি স্ট্রিং প্যারামিটারগুলি মানগুলির তালিকাগুলি হিসাবে বৈশিষ্ট্যগুলিতে স্টোর করা হয়, তাই এটি নেট qsObj["param"]কল করার মতো হবে GetValues("param")

আশা করি তুমি পছন্দ করেছ. JQuery প্রয়োজন হয় না।

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

এটি কীভাবে ব্যবহার করবেন তা এখানে:

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

কনসোলটিতে ফলাফলটি পূর্বরূপ দেখতে ন্যায্য টাইপ করুন:

JSON.stringify(qsObj)

আউটপুট:

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

1

সিএসএস-ট্রিক্সে একটি সুন্দর ওয়ান-লাইনার রয়েছে ( নিকোলাস অর্টেনজিওর আসল উত্স ):

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

সত্যিকারের চালাক অংশটি হ'ল এটি কীভাবে বেনামে ফাংশনটির thisঅবজেক্টটি ব্যবহার করে, স্ট্রিংয়ের প্রতিটি প্রশ্নের জন্য একটি কী / মান জোড়া যুক্ত করে। বলেছিল, উন্নতির কিছু জায়গা আছে। আমি নীচের পরিবর্তনগুলির সাথে একে একে নীচে পরিবর্তন করেছি:

  1. খালি স্ট্রিং এবং নন-স্ট্রিং ইনপুট যুক্ত হ্যান্ডলিং।

  2. ইউআরআই-এনকোডেড স্ট্রিংগুলি হ্যান্ডেল করুন ( %40-> @ইত্যাদি)।

  3. document.location.searchইনপুট খালি থাকাকালীন ডিফল্ট ব্যবহার সরিয়ে ফেলল।

  4. নাম পরিবর্তন করা হয়েছে, আরও পাঠযোগ্য, মন্তব্য যুক্ত করেছে।

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

1

এটি সত্যিই পুরানো প্রশ্ন, তবে আমি যেমন আসছি - অন্যান্য লোকেরা এই পোস্টে আসতে পারে এবং আমি এই থিমটি কিছুটা রিফ্রেশ করতে চাই। আজ কাস্টম সমাধানগুলি করার দরকার নেই - URLS SearchParams ইন্টারফেস রয়েছে।

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

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

আমি জানি কেবলমাত্র একটি সীমাবদ্ধতা - এই বৈশিষ্ট্যটি আইই / এজতে সমর্থিত নয়।


দুর্ভাগ্যক্রমে আইই দ্বারা সমর্থন করা হয় না, যথারীতি যদি আপনার এই ব্রাউজারটি সমর্থন করার প্রয়োজন হয়।
লরেন

0

এটি আমার প্রতিলিপিটির সংস্করণ। ইউআরএলের মতো কাজ করে 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

0

আপনি যদি কেবল কোনও জিইটি অনুরোধ থেকে প্যারামিটারগুলি দ্রুত পেতে চান তবে এখানে একটি সহজ এবং কমপ্যাক্ট রয়েছে:

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

এটি রূপান্তরিত হয়

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

মত একটি বস্তুর মধ্যে

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

0

একটি অ্যারে বা অবজেক্টের ক্রমিক উপস্থাপনা তৈরি করে (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

1
ব্যাখ্যা ছাড়াই কোডটি স্বাগত নয়। দয়া করে এগিয়ে যান এবং আপনার কোড ব্যাখ্যা করুন?
এল। গুথার্ট

অ্যারে বা অবজেক্টের ক্রমিক উপস্থাপনা তৈরি করে (এজেএক্স অনুরোধের জন্য ইউআরএল কোয়েরি স্ট্রিং হিসাবে ব্যবহার করা যেতে পারে)
বিশাল প্যাটেল

এটি সম্পাদনা করে দয়া করে আপনার উত্তরে সরাসরি ব্যাখ্যা যুক্ত করুন। যদিও মন্তব্যে নেই।
এল গুথার্ট

-1

উত্তরগুলি কিছুটা 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);

https://gist.github.com/956897 এ কাঁটাচামচ


-1

আপনি নিজে jQuery এর ফাংশন .serializeArray()( লিঙ্ক ) ব্যবহার করতে পারেন । এই ফাংশনটি কী-মান জোড়ার একটি অ্যারে প্রদান করে। ফলাফল উদাহরণ:

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

1
এটি জিজ্ঞাসা করা হয় না। সে একটি স্ট্রিংকে হ্যাশে পরিণত করতে চায়। সিরিয়ালাইজ অ্যারে একটি ফর্ম নেয় এবং একটি অ্যারে প্রদান করে।
ড্যানিয়েল ব্যাং
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.