Saya memiliki string seperti ini:
abc=foo&def=%5Basf%5D&xyz=5
Bagaimana saya bisa mengubahnya menjadi objek JavaScript seperti ini?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Saya memiliki string seperti ini:
abc=foo&def=%5Basf%5D&xyz=5
Bagaimana saya bisa mengubahnya menjadi objek JavaScript seperti ini?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Jawaban:
Edit
Hasil edit ini meningkatkan dan menjelaskan jawaban berdasarkan komentar.
Contoh
Parsing
abc=foo&def=%5Basf%5D&xyz=5
dalam lima langkah:abc=foo","def=[asf]","xyz=5
abc":"foo","def":"[asf]","xyz":"5
{"abc":"foo","def":"[asf]","xyz":"5"}
yang merupakan JSON legal.
Sebuah solusi ditingkatkan memungkinkan untuk karakter lebih dalam string pencarian. Ini menggunakan fungsi reviver untuk decoding URI:
Contoh
memberi
Jawaban asli
Satu kalimat:
sumber
JSON.parse('{"' + decodeURI(location.search.substring(1).replace(/&/g, "\",\"").replace(/=/g, "\":\"")) + '"}')
ES6 / 7/8 2020 dan tentang pendekatan
Mulai ES6 dan seterusnya, Javascript menawarkan beberapa konstruksi untuk membuat solusi yang tepat untuk masalah ini.
Ini termasuk menggunakan URLSearchParams dan iterator
Jika use case Anda mengharuskan Anda untuk benar-benar mengubahnya menjadi objek, Anda dapat mengimplementasikan fungsi berikut:
Demo Dasar
Menggunakan Object.fromEntries dan menyebar
Kita bisa menggunakan Object.fromEntries (yang saat ini dalam tahap 4), ganti
paramsToObject
denganObject.fromEntries(entries)
.Karena
URLParams
, mengembalikan objek yang dapat diulang , menggunakan operator spread alih-alih memanggil.entries
juga akan menghasilkan entri per specnya:Catatan: Semua nilai adalah string secara otomatis sesuai dengan spesifikasi URLSearchParams
Beberapa kunci yang sama
Sebagai @siipe ditunjukkan , string yang berisi beberapa nilai kunci yang sama akan dipaksa ke nilai terakhir yang tersedia:
foo=first_value&foo=second_value
pada dasarnya akan menjadi:{foo: "second_value"}
.Sesuai jawaban ini: https://stackoverflow.com/a/1746566/1194694 tidak ada spesifikasi untuk memutuskan apa yang harus dilakukan dengannya dan setiap kerangka kerja dapat berperilaku berbeda.
Kasus penggunaan umum adalah menggabungkan dua nilai yang sama ke dalam array, membuat objek output menjadi:
Ini dapat dicapai dengan kode berikut:
sumber
search string
pengurai - yang memang dirancang untuk dilakukan, terlepas dari apa yang dikaitkan dengan URLObject.fromEntries
tidak berfungsi untuk kunci yang berulang. Jika kita mencoba melakukan sesuatu seperti?foo=bar1&foo=bar2
, kita hanya akan mendapatkannya{ foo: 'bar2' }
. Objek permintaan Node.js, misalnya, mem{ foo: ['bar1', 'bar2'] }
let temp={};Object.keys(params).map(key=>{temp[key]=urlParams.getAll(key)})
ES6 satu liner. Bersih dan sederhana.
Untuk kasus spesifik Anda, itu akan menjadi:
sumber
"http://place.com?foo=bar&hello=%40world&showThing"
menghasilkan{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
?someValue=false
menjadi{ someValue: "false" }
?foo=bar1&foo=bar2
, kita hanya akan mendapatkannya{ foo: 'bar2' }
. Node.js meminta objek mem{ foo: ['bar1', 'bar2'] }
location.search
Pisahkan
&
untuk mendapatkan pasangan nama / nilai, lalu pisahkan setiap pasangan=
. Ini sebuah contoh:Pendekatan lain, menggunakan ekspresi reguler:
Ini diadaptasi dari "Cari dan Jangan Ganti" John Resig .
sumber
Solusi ringkas:
sumber
Solusi yang saya temukan sejauh ini tidak mencakup skenario yang lebih kompleks.
Saya perlu mengonversi string kueri seperti
https://random.url.com?Target=Offer&Method=findAll&filters%5Bhas_goals_enabled%5D%5BTRUE%5D=1&filters%5Bstatus%5D=active&fields%5B%5D=id&fields%5B%5D=name&fields%5B%5D=default_goal_name
menjadi objek seperti:
ATAU:
https://random.url.com?Target=Report&Method=getStats&fields%5B%5D=Offer.name&fields%5B%5D=Advertiser.company&fields%5B%5D=Stat.clicks&fields%5B%5D=Stat.conversions&fields%5B%5D=Stat.cpa&fields%5B%5D=Stat.payout&fields%5B%5D=Stat.date&fields%5B%5D=Stat.offer_id&fields%5B%5D=Affiliate.company&groups%5B%5D=Stat.offer_id&groups%5B%5D=Stat.date&filters%5BStat.affiliate_id%5D%5Bconditional%5D=EQUAL_TO&filters%5BStat.affiliate_id%5D%5Bvalues%5D=1831&limit=9999
KE:
Saya mengkompilasi dan mengadaptasi beberapa solusi menjadi solusi yang benar-benar berfungsi:
KODE:
sumber
obj=encodeURIComponent(JSON.stringify({what:{ever:','},i:['like']}))
.Ini adalah versi sederhana, jelas Anda ingin menambahkan beberapa pengecekan kesalahan:
sumber
JSON.parse('{"' + decodeURIComponent(query.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'));
bekerja untuk sayaname[]=test1&name[]=test2
dan itu akan menghasilkanname[]=test2
Saya menemukan $ .String.deparam solusi pra dibangun paling lengkap (dapat melakukan objek bersarang dll). Lihatlah dokumentasinya .
sumber
Pendekatan One-Liner 2019
Untuk kasus spesifik Anda:
Untuk kasus yang lebih umum di mana seseorang ingin mem-parsing kueri param ke objek:
Jika Anda tidak dapat menggunakan Object.fromEntries, ini juga akan berfungsi:
sumber
[...new URLSearchParams(window.location.search)].reduce((o, i) => ({ ...o, [i[0]]: i[1] }), {});
"http://place.com?foo=bar&hello=%40world&showThing
menghasilkan{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
. Coba tambahkanstr.split("?").pop()
Solusi lain berdasarkan standar terbaru dari URLSearchParams ( https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )
Harap dicatat bahwa solusi ini memanfaatkan
Array.from ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from )
dan _.fromPairs ( https://lodash.com/docs#fromPairs ) lodash demi kesederhanaan.
Seharusnya mudah untuk membuat solusi yang lebih kompatibel karena Anda memiliki akses ke iterator searchParams.entries () .
sumber
Saya memiliki masalah yang sama, mencoba solusinya di sini, tetapi tidak ada yang benar-benar berfungsi, karena saya memiliki array dalam parameter URL, seperti ini:
Jadi saya akhirnya menulis fungsi JS saya sendiri, yang membuat array dari param di URI:
sumber
if(chunk[0].search("\\[\\]") !== -1) {
ituchunk[0]=chunk[0].replace(/\[\]$/,'');
const
alih-alihvar
karena seseorang mungkin melakukannyacreateObjFromURI = 'some text'
dan mereka akan mengacaukan kodenya. jika Anda menggunakanconst
maka seseorang yang menjalankancreateObjFromURI = 'some text'
akan membuat kesalahan tidak dapat memberikan nilai ke variabel konstan.Menggunakan ES6, URL API dan URLSearchParams API.
sumber
ES6 one liner (jika kita bisa menyebutnya dengan cara melihat garis panjang)
[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})
sumber
cur
untuk beberapa kejelasan tambahan..reduce((prev, [key, val]) => {prev[key] = val})
Cukup mudah menggunakan
URLSearchParams
API Web JavaScript,Tautan yang Berguna
sumber
Untuk Node JS, Anda dapat menggunakan Node JS API
querystring
:Dokumentasi: https://nodejs.org/api/querystring.html
sumber
Tidak ada solusi asli yang saya ketahui. Dojo memiliki metode unserialisasi bawaan jika Anda menggunakan kerangka kerja itu secara kebetulan.
Kalau tidak, Anda bisa menerapkannya sendiri cukup sederhana:
sunting: tambah komponen decodeURICon ()
sumber
Ada perpustakaan ringan bernama YouAreI.js yang diuji dan membuatnya sangat mudah.
sumber
Salah satu cara paling sederhana untuk melakukan ini menggunakan antarmuka URLSearchParam.
Berikut ini cuplikan kode kerja:
sumber
Ini tampaknya menjadi solusi terbaik karena perlu mempertimbangkan beberapa parameter dengan nama yang sama.
Saya kemudian memutuskan untuk mengubahnya menjadi plugin jQuery juga ...
Sekarang, yang pertama hanya akan menerima parameter tetapi plugin jQuery akan mengambil seluruh url dan mengembalikan parameter serial.
sumber
Inilah yang saya gunakan:
Penggunaan dasar, mis.
?a=aa&b=bb
Object {a: "aa", b: "bb"}
Duplikat params, mis.
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}
Kunci tidak ada, mis.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}
Nilai yang hilang, mis.
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}
Solusi JSON / regex di atas melempar kesalahan sintaks pada url aneh ini:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}
sumber
Inilah versi cepat dan kotor saya, yang pada dasarnya memisahkan parameter URL yang dipisahkan oleh '&' menjadi elemen array, dan kemudian beralih ke array itu dengan menambahkan pasangan kunci / nilai yang dipisahkan oleh '=' ke dalam objek. Saya menggunakan komponen decodeURICon () untuk menerjemahkan karakter yang disandikan ke string normal mereka (jadi% 20 menjadi spasi,% 26 menjadi '&', dll):
contoh:
kembali
Satu-satunya masalah adalah bahwa xyz adalah string dan bukan angka (karena menggunakan dekodeURkomponen ()), tetapi di luar itu bukan titik awal yang buruk.
sumber
sumber
Babel
bantuan Anda dapat melakukannya dengan baik di bawah lingkungan lainMenggunakan phpjs
sumber
Membangun di atas jawaban Mike Causer Saya telah membuat fungsi ini yang mempertimbangkan beberapa params dengan kunci yang sama (
foo=bar&foo=baz
) dan juga parameter yang dipisahkan koma (foo=bar,baz,bin
). Ini juga memungkinkan Anda mencari kunci permintaan tertentu.Input contoh:
foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3
Contoh output
sumber
Jika Anda menggunakan URI.js, Anda dapat menggunakan:
https://medialize.github.io/URI.js/docs.html#static-parseQuery
sumber
sumber
U PERTAMA PERLU MENDAFTARKAN APA YANG DAPATKAN VAR:
Dari sekadar membaca:
dan gunakan seperti:
sumber
Saya perlu juga berurusan dengan
+
di bagian permintaan URL ( decodeURIComponent tidak ), jadi saya mengadaptasi kode Wolfgang menjadi:Dalam kasus saya, saya menggunakan jQuery untuk mendapatkan parameter bentuk URL-ready, maka trik ini untuk membangun objek dari itu dan saya kemudian dapat dengan mudah memperbarui parameter pada objek dan membangun kembali URL kueri, misalnya:
sumber
Saya melakukannya dengan cara ini:
sumber
Jika Anda membutuhkan rekursi, Anda dapat menggunakan perpustakaan kecil js-extension-ling .
Ini akan menampilkan sesuatu seperti ini:
Catatan: ini didasarkan pada fungsi locutus parse_str ( https://locutus.io/php/strings/parse_str/ ).
sumber