Apakah ada cara tanpa plugin untuk mengambil nilai string kueri melalui jQuery (atau tanpa)?
Jika ya, bagaimana caranya? Jika tidak, apakah ada plugin yang dapat melakukannya?
javascript
url
plugins
query-string
Ripounet
sumber
sumber
Jawaban:
Pembaruan: Sep-2018
Anda dapat menggunakan URLSearchParams yang sederhana dan memiliki dukungan browser yang layak (tetapi tidak lengkap) .
Asli
Anda tidak perlu jQuery untuk tujuan itu. Anda dapat menggunakan hanya beberapa JavaScript murni:
Pemakaian:
Catatan: Jika suatu parameter hadir beberapa kali (
?foo=lorem&foo=ipsum
), Anda akan mendapatkan nilai pertama (lorem
). Tidak ada standar tentang hal ini dan penggunaannya bervariasi, lihat misalnya pertanyaan ini: Posisi otoritatif dari kunci permintaan HTTP GET duplikat .CATATAN: Fungsi ini case-sensitive. Jika Anda lebih suka nama parameter case-insensitive, tambahkan pengubah 'i' ke RegExp
Ini adalah pembaruan berdasarkan spesifikasi URLSearchParams baru untuk mencapai hasil yang sama secara lebih ringkas. Lihat jawaban berjudul " URLSearchParams " di bawah.
sumber
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
Nilai bidangx
ini ambigu.?mykey=0&m.+key=1
, panggilangetParameterByName("m.+key")
akan kembali0
sebagai gantinya1
. Anda perlu melarikan diri dari metakarakter ekspresi regulername
sebelum membangun ekspresi reguler Anda. Dan Anda hanya perlu menelepon.replace()
sekali dengan menggunakan bendera global dan menggunakan"\\$&"
sebagai ekspresi pengganti. Anda harus mencarilocation.search
alih-alihlocation.href
. Jawaban dengan lebih dari 400 upvotes harus menjelaskan perincian ini.Beberapa solusi yang diposting di sini tidak efisien. Mengulang pencarian ekspresi reguler setiap kali skrip perlu mengakses parameter sama sekali tidak perlu, satu fungsi tunggal untuk membagi parameter menjadi objek gaya array asosiatif sudah cukup. Jika Anda tidak bekerja dengan API Riwayat HTML 5, ini hanya diperlukan satu kali per halaman dimuat Saran lain di sini juga gagal memecahkan kode URL dengan benar.
Contoh querystring:
Hasil:
Ini dapat dengan mudah ditingkatkan untuk menangani string kueri gaya array juga. Contohnya ada di sini , tetapi karena parameter gaya array tidak didefinisikan dalam RFC 3986 saya tidak akan mencemari jawaban ini dengan kode sumber. Bagi mereka yang tertarik dengan versi "tercemar", lihat jawaban campbeln di bawah ini .
Juga, sebagaimana ditunjukkan dalam komentar,
;
adalah pembatas hukum untukkey=value
pasangan. Itu akan membutuhkan regex yang lebih rumit untuk ditangani;
atau&
, yang saya pikir tidak perlu karena jarang;
digunakan dan saya akan mengatakan lebih tidak mungkin bahwa keduanya akan digunakan. Jika Anda perlu mendukung;
alih-alih&
, cukup tukar di regex.Jika Anda menggunakan bahasa preprocessing sisi-server, Anda mungkin ingin menggunakan fungsi JSON aslinya untuk melakukan pekerjaan berat untuk Anda. Misalnya, dalam PHP Anda dapat menulis:
Jauh lebih sederhana!
DIPERBARUI
Jadi, ini adalah pendekatan untuk mengelolanya:
sumber
window.location.hash
properti, yang terpisah dariwindow.location.search
properti. Jika hash berubah, itu tidak mempengaruhi querystring sama sekali.;
adalah pembatas hukum untukkey=value
pasangan GET . Ini jarang terjadi, tetapi perlu 5 detik untuk mengimplementasikannya.?a=b&c=d
adalah konvensional, dan rekomendasi W3C untuk formulir web, tetapi spesifikasi URI hanya menentukanquery = *( pchar / "/" / "?" )
.while(match = search.exec(query))
denganwhile((match = search.exec(query)) !== null)
ES2015 (ES6)
Tanpa jQuery
Dengan URL seperti
?topic=123&name=query+string
, yang berikut akan kembali:Metode Google
Merobek kode Google, saya menemukan metode yang mereka gunakan:
getUrlParameters
Itu dikaburkan, tetapi itu bisa dimengerti. Tidak berfungsi karena beberapa variabel tidak terdefinisi.
Mereka mulai mencari parameter pada url dari
?
dan juga dari hash#
. Kemudian untuk setiap parameter mereka berpisah dalam tanda samab[f][p]("=")
(yang terlihat sepertiindexOf
, mereka menggunakan posisi char untuk mendapatkan kunci / nilai). Setelah dipecah mereka memeriksa apakah parameter memiliki nilai atau tidak, jika sudah maka mereka menyimpan nilaid
, jika tidak mereka hanya melanjutkan.Pada akhirnya objek
d
dikembalikan, penanganan melarikan diri dan+
tanda. Objek ini seperti milik saya, memiliki perilaku yang sama.Metode saya sebagai plugin jQuery
Pemakaian
Tes kinerja (metode split terhadap metode regex) ( jsPerf )
Kode persiapan: deklarasi metode
Pisahkan kode uji
Regex kode uji
Pengujian di Firefox 4.0 x86 pada Windows Server 2008 R2 / 7 x64
sumber
unescape
adalah fungsi yang sudah usang dan diganti dengandecodeURIComponent()
, perhatikan bahwa tidak satu pun dari fungsi-fungsi ini akan dengan benar memecahkan kode a+
ke karakter spasi. 2. Anda harus mendeklarasikan hasilnya sebagai objek, bukan array karena JavaScript tidak memiliki array asosiatif, per se, dan array yang Anda deklarasikan diperlakukan sebagai objek dengan menetapkan properti yang dinamai padanya.window.location
membuat masalah kinerja diperdebatkan, mengingat bahwa klien menavigasi ke URL jauh, jauh lebih mahal.Versi perbaikan dari jawaban Artem Barger :
Untuk informasi lebih lanjut tentang peningkatan, lihat: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/
sumber
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
.null
jika parameter tidak diikuti oleh '='. Anda dapat menambahkanif (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;
untuk membuatnya kembaliboolean false
jika parameter tidak ada sama sekali.new
awalan saat membuat regex:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
URLSearchParams
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ dan Chrome 49+ mendukung API URLSearchParams :
Ada polyfill URLSearchParams yang disarankan google untuk versi stabil IE.
Ini tidak distandarisasi oleh W3C , tetapi itu adalah standar hidup oleh WhatWG .
Anda dapat menggunakannya di
location
:atau
Atau tentu saja di URL apa pun:
Anda bisa mendapatkan params juga menggunakan
.searchParams
properti steno pada objek URL, seperti ini:Anda membaca / parameter yang ditetapkan melalui
get(KEY)
,set(KEY, VALUE)
,append(KEY, VALUE)
API. Anda juga dapat mengulangi semua nilaifor (let p of params) {}
.Sebuah implementasi referensi dan halaman sampel yang tersedia untuk audit dan pengujian.
sumber
.get
bukan hanya.
slice(1)
aktif.search
, Anda bisa menggunakannya langsung. URLSearchParams dapat menangani yang utama?
.URLSearchParams
tidak baik karena tidak mengembalikan nilai aktual dari parameter URL.new URL('https://example.com?foo=1&bar=2')
tidak berfungsi untuk url androidfile:///android_asset/...
Hanya rekomendasi lain. Plugin Purl memungkinkan untuk mengambil semua bagian URL, termasuk jangkar, host, dll.
Ini dapat digunakan dengan atau tanpa jQuery.
Penggunaannya sangat sederhana dan keren:
Namun, pada 11 November 2014, Purl tidak lagi dipertahankan dan penulis merekomendasikan untuk menggunakan URI.js sebagai gantinya. Plugin jQuery berbeda karena berfokus pada elemen - untuk penggunaan dengan string, cukup gunakan
URI
langsung, dengan atau tanpa jQuery. Kode serupa akan terlihat seperti itu, dokumen lebih lengkap di sini :sumber
tl; dr
Solusi cepat dan lengkap , yang menangani kunci multinilai dan karakter yang disandikan .
Multi-baris:Apa semua kode ini ...
Contoh:"null-coalescing" , evaluasi hubung singkat
ES6 Penghancuran tugas , fungsi Panah , string Templat
Baca lebih lanjut ... tentang solusi JavaScript Vanilla.
Untuk mengakses berbagai bagian penggunaan URL
location.(search|hash)
Solusi termudah (dummy)
Kunci multi-nilai
Pemeriksaan kunci sederhana
(item in dict) ? dict.item.push(val) : dict.item = [val]
qd.key[index]
atauqd[key][index]
Karakter yang dikodekan?
Gunakan
Contoh:decodeURIComponent()
untuk pemisahan kedua atau kedua .Dari komentar
* !!! Harap dicatat, itu
decodeURIComponent(undefined)
mengembalikan string"undefined"
. Solusinya terletak pada penggunaan sederhana&&
, yang memastikan bahwadecodeURIComponent()
tidak dipanggil pada nilai yang tidak ditentukan. (Lihat "solusi lengkap" di atas.)Jika querystring kosong (
location.search == ""
), hasilnya agak menyesatkanqd == {"": undefined}
. Disarankan untuk memeriksa querystring sebelum meluncurkan fungsi parsing likeso:sumber
array.forEach()
dengan menyuntikkan kode tertentu di awal skrip Anda. lihat Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
Roshambo di snipplr.com memiliki skrip sederhana untuk mencapai hal ini yang dijelaskan dalam Dapatkan URL Parameter dengan jQuery | Ditingkatkan . Dengan skripnya, Anda juga dapat dengan mudah menarik hanya parameter yang Anda inginkan.
Inilah intinya:
Kemudian dapatkan parameter Anda dari string kueri.
Jadi jika URL / string kueri itu
xyz.com/index.html?lang=de
.Panggil saja
var langval = $.urlParam('lang');
, dan Anda sudah mendapatkannya.UZBEKJON juga memiliki posting blog yang luar biasa, Dapatkan parameter URL & nilai dengan jQuery .
sumber
0
? Tentu, saya bisa menggunakan pemeriksaan kesetaraan yang ketat, tetapi bukankah seharusnya demikiannull
?Jika Anda menggunakan jQuery, Anda dapat menggunakan perpustakaan, seperti jQuery BBQ: Back Button & Query Library .
Sunting: Menambahkan Contoh Deparam:
Jika Anda hanya ingin menggunakan JavaScript biasa, Anda dapat menggunakan ...
Karena API Riwayat HTML yang baru dan secara khusus
history.pushState()
danhistory.replaceState()
, URL dapat berubah yang akan membatalkan cache parameter dan nilainya.Versi ini akan memperbarui cache parameter internal setiap kali sejarah berubah.
sumber
Cukup gunakan dua pemisahan :
Saya membaca semua jawaban sebelumnya dan lebih lengkap. Tapi saya pikir itu adalah metode paling sederhana dan lebih cepat. Anda dapat memeriksa di benchmark jsPerf ini
Untuk mengatasi masalah dalam komentar Rup, tambahkan split bersyarat dengan mengubah baris pertama menjadi dua di bawah. Tetapi akurasi absolut berarti sekarang lebih lambat daripada regexp (lihat jsPerf ).
Jadi, jika Anda tahu Anda tidak akan menemui kasus balasan Rup, ini menang. Kalau tidak, regexp.
sumber
get('value')
padahttp://the-url?oldvalue=1&value=2
.half
kebenaran, ini mengembalikan nol untuk parameter kosong seperti?param=
. Seharusnya mengembalikan string kosong dalam kasus ini, dan memeriksahalf !== undefined
menyelesaikannya.function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
untuk membuatnya bekerjaInilah langkah saya untuk membuat solusi sempurna Andy E menjadi plugin jQuery lengkap:
Sintaksnya adalah:
Terbaik dari kedua dunia!
sumber
Jika Anda melakukan lebih banyak manipulasi URL daripada hanya mengurai querystring, Anda dapat menemukan URI.js bermanfaat. Ini adalah perpustakaan untuk memanipulasi URL - dan dilengkapi dengan semua lonceng dan peluit. (Maaf untuk iklan mandiri di sini)
untuk mengkonversi pertanyaan Anda menjadi peta:
(URI.js juga "perbaikan" querystrings buruk seperti
?&foo&&bar=baz&
untuk?foo&bar=baz
)sumber
var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');
untuk hasil yang sama ( dokumen ).Saya suka solusi Ryan Phelan . Tapi saya tidak melihat ada gunanya memperpanjang jQuery untuk itu? Tidak ada penggunaan fungsionalitas jQuery.
Di sisi lain, saya suka fungsi bawaan di Google Chrome: window.location.getParameter.
Jadi mengapa tidak menggunakan ini? Oke, browser lain tidak punya. Jadi mari kita buat fungsi ini jika tidak ada:
Fungsi ini lebih atau kurang dari Ryan Phelan, tetapi dibungkus berbeda: nama yang jelas dan tidak ada ketergantungan perpustakaan javascript lainnya. Lebih lanjut tentang fungsi ini di blog saya .
sumber
Berikut adalah cara cepat untuk mendapatkan objek yang mirip dengan array $ _GET PHP :
Pemakaian:
Untuk string kueri
x=5&y&z=hello&x=6
ini mengembalikan objek:sumber
(function($) { $.extend({ get_query: function (name) { var url = location.href; var qs = url.substring(url.indexOf('?') + 1).split('&'); for(var i = 0, result = {}; i < qs.length; i++){ qs[i] = qs[i].split('='); result[qs[i][0]] = qs[i][1]; } return result; } }); })(jQuery);
dan gunakan seperti ini:$.get_query()
location.href
harus diganti denganlocation.search
.Tetap sederhana dalam kode JavaScript biasa:
Sebut saja dari mana saja dalam kode JavaScript:
sumber
window.location.search
!Ini semua adalah jawaban yang bagus, tetapi saya membutuhkan sesuatu yang sedikit lebih kuat, dan saya pikir Anda semua mungkin ingin memiliki apa yang saya buat.
Ini adalah metode perpustakaan sederhana yang melakukan pembedahan dan manipulasi parameter URL. Metode statis memiliki sub metode berikut yang dapat dipanggil pada URL subjek:
Contoh:
sumber
Dari MDN :
sumber
Golf kode:
Tampilkan itu!
Di Mac saya:
test.htm?i=can&has=cheezburger
menampilkansumber
Saya sering menggunakan ekspresi reguler, tetapi tidak untuk itu.
Tampaknya lebih mudah dan lebih efisien bagi saya untuk membaca string kueri sekali di aplikasi saya, dan membangun objek dari semua pasangan kunci / nilai seperti:
Untuk URL seperti
http://domain.com?param1=val1¶m2=val2
Anda bisa mendapatkan nilainya nanti di kode Anda sebagaisearch.param1
dansearch.param2
.sumber
sumber
Metode Roshambo jQuery tidak menangani URL decode
Baru saja menambahkan kemampuan itu sambil menambahkan dalam pernyataan kembali
Sekarang Anda dapat menemukan inti yang diperbarui:
sumber
Saya suka yang ini (diambil dari jquery-howto.blogspot.co.uk):
Bekerja bagus untukku.
sumber
Inilah hasil edit saya untuk jawaban yang luar biasa ini - dengan kemampuan tambahan untuk mengurai string kueri dengan kunci tanpa nilai.
PENTING! Parameter untuk fungsi di baris terakhir berbeda. Itu hanya sebuah contoh bagaimana seseorang dapat mengirimkan URL yang sewenang-wenang padanya. Anda dapat menggunakan baris terakhir dari jawaban Bruno untuk mem-parsing URL saat ini.
Jadi apa sebenarnya yang berubah? Dengan url
http://sb.com/reg/step1?param=
hasilnya akan sama. Tetapi dengan urlhttp://sb.com/reg/step1?param
, solusi Bruno mengembalikan objek tanpa kunci, sedangkan milik saya mengembalikan objek dengan kunciparam
danundefined
nilai.sumber
Saya membutuhkan objek dari string kueri, dan saya benci banyak kode. Ini mungkin bukan yang paling kuat di alam semesta, tetapi itu hanya beberapa baris kode.
URL seperti
this.htm?hello=world&foo=bar
akan membuat:sumber
decodeURIComponent
nilai saat Anda menyimpannya - dan kuncinya juga, tetapi Anda cenderung menggunakan string aneh dalam hal itu.?a&b&c
tetapi ini benar-benar sangat mudah dibaca (dan kebetulan mirip dengan ide pertama saya). Jugasplit
berlebihan tapi saya punya ikan kinerja yang lebih besar untuk menggoreng daripada membelah string 10 karakter dua kali.location.search.substr(1)
alih-alihlocation.href.split('?')[1]
menghindari mengambil hash (#anchor
) bersama dengan parameter permintaan terakhir.location.search
!Berikut adalah versi diperpanjang dari Andy E yang terhubung "Menangani string-gaya permintaan string" -versi. Memperbaiki bug (
?key=1&key[]=2&key[]=3
;1
hilang dan diganti dengan[2,3]
), membuat beberapa peningkatan kinerja kecil (mendekode ulang nilai, menghitung ulang posisi "[", dll.) Dan menambahkan sejumlah perbaikan (difungsikan, dukungan untuk?key=1&key=2
, dukungan untuk;
pembatas) . Saya meninggalkan variabel-variabel yang sangat pendek, tetapi menambahkan banyak komentar untuk membuatnya mudah dibaca (oh, dan saya menggunakan kembaliv
fungsi lokal, maaf jika itu membingungkan;).Ini akan menangani querystring berikut ...
... membuatnya menjadi objek yang terlihat seperti ...
Seperti yang Anda lihat di atas, versi ini menangani beberapa ukuran array "salah bentuk", yaitu -
person=neek&person[]=jeff&person[]=jim
atauperson=neek&person=jeff&person=jim
karena kunci dapat diidentifikasi dan valid (setidaknya dalam NameValueCollection.Add dotNet ):Tampaknya juri agak keluar pada kunci yang diulang karena tidak ada spesifikasi. Dalam hal ini, beberapa kunci disimpan sebagai array (palsu). Tetapi perhatikan bahwa saya tidak memproses nilai berdasarkan koma menjadi array.
Kode:
sumber
q = decodeURIComponent(window.location.search.substring(1)),
membantu melakukannya juga.Ini adalah fungsi yang saya buat beberapa waktu lalu dan saya cukup senang dengannya. Ini bukan case-sensitive - yang berguna. Juga, jika QS yang diminta tidak ada, itu hanya mengembalikan string kosong.
Saya menggunakan versi terkompresi dari ini. Saya memposting tanpa kompresi untuk tipe pemula untuk lebih menjelaskan apa yang terjadi.
Saya yakin ini bisa dioptimalkan atau dilakukan secara berbeda untuk bekerja lebih cepat, tetapi selalu bekerja dengan baik untuk apa yang saya butuhkan.
Nikmati.
sumber
Kami baru saja merilis arg.js , sebuah proyek yang ditujukan untuk menyelesaikan masalah ini untuk selamanya. Secara tradisional sudah sangat sulit, tetapi sekarang Anda dapat melakukannya:
atau mendapatkan semuanya:
dan jika Anda peduli tentang perbedaan antara
?query=true
dan#hash=true
kemudian Anda dapat menggunakanArg.query()
danArg.hash()
metode.sumber
Masalah dengan jawaban teratas pada pertanyaan itu adalah bahwa parameter itu tidak didukung ditempatkan setelah #, tetapi kadang-kadang diperlukan untuk mendapatkan nilai ini juga.
Saya memodifikasi jawaban untuk membiarkannya menguraikan string kueri penuh dengan tanda pagar juga:
sumber
Dan ini adalah bagaimana Anda dapat menggunakan fungsi ini dengan asumsi URL-nya
sumber
?stringtext&stringword=foo
.Jika Anda menggunakan Browserify, Anda dapat menggunakan
url
modul dari Node.js :Bacaan lebih lanjut: URL Node.js v0.12.2 Manual & Dokumentasi
EDIT: Anda dapat menggunakan antarmuka URL , yang cukup banyak diadopsi di hampir semua browser baru dan jika kode akan berjalan di browser lama Anda dapat menggunakan polyfill seperti ini . Berikut ini contoh kode tentang cara menggunakan antarmuka URL untuk mendapatkan parameter kueri (alias parameter pencarian)
Anda juga dapat menggunakan URLSearchParams untuk itu, berikut adalah contoh dari MDN untuk melakukannya dengan URLSearchParams:
sumber
url
API modul ada di sini: nodejs.org/api/url.html