Dapatkan nilai url parameter string kueri dengan jQuery / Javascript (querystring)


149

Adakah yang tahu cara yang baik untuk menulis ekstensi jQuery untuk menangani parameter string kueri? Saya pada dasarnya ingin memperluas ($)fungsi sihir jQuery sehingga saya dapat melakukan sesuatu seperti ini:

$('?search').val(); 

Yang akan memberi saya nilai "test" di URL berikut: http://www.example.com/index.php?search=test.

Saya telah melihat banyak fungsi yang dapat melakukan ini dalam jQuery dan Javascript, tetapi saya sebenarnya ingin memperluas jQuery agar berfungsi persis seperti yang ditunjukkan di atas. Saya tidak mencari plugin jQuery, saya mencari ekstensi ke metode jQuery.



1
@NicoWesterdale - Saya telah menelusuri tautan itu, tetapi tidak melihat jawaban apa pun yang memecahkan pertanyaan khusus ini. Dia bilang dia ingin persis seperti di atas.
mrtsherman

2
Saya tidak berpikir Anda bisa melakukan ini, string yang dilewatkan akan diurai oleh hari yg amat panas, kemudian diselesaikan ke array objek DOM. Anda dapat memperluas pencocokan untuk menyediakan filter khusus, tetapi Anda tidak dapat memiliki objek jquery berdasarkan string.
Andrew

6
Apakah tidak $cukup kelebihan beban?
Quentin

1
@mrtsherman Lihat fungsi getParameterByName () di tautan yang saya berikan. Tidak, Anda tidak dapat melakukannya dari langsung dalam $ prompt, tetapi bukan untuk apa itu penyeleksi jQuery. Dia hanya memilih bagian dari string URL, tidak mencoba mengakses bagian dari DOM yang merupakan fungsi $ (). Itu hal yang sama sekali berbeda. Jika Anda benar-benar ingin menggunakan jQuery, Anda dapat menulis sebuah plugin yang menggunakan sintaks ini: $ .getParameterByName (param), ada contoh lebih jauh di bawah pada halaman yang saya tautkan dengan yang melakukan hal itu. Agak sia-sia saja.
Nico Westerdale

Jawaban:


46

Setelah bertahun-tahun penguraian string yang jelek, ada cara yang lebih baik: URLSearchParams Mari kita lihat bagaimana kita dapat menggunakan API baru ini untuk mendapatkan nilai dari lokasi!

// Dengan asumsi "? Post = 1234 & action = edit"

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

PEMBARUAN: IE tidak didukung

gunakan fungsi ini dari jawaban di bawah alih-alih URLSearchParams

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('action')); //edit

1
Apakah URLSearchParams didukung oleh semua browser?
ilahi

Ups! ohh man, IE tidak didukung !! Saya baru saja mengujinya. Sementara Chrome, FF, Safari tidak memiliki masalah.
Saurin

1
@divine - Ada polyfill untuk URLSearchParams di sini: github.com/WebReflection/url-search-params
Roberto

Jika Anda menambahkan polyfill untuk browser yang tidak didukung, solusi URLSearchParams ini berfungsi dengan baik. github.com/ungap/url-search-params
Louisvdw

104

Mengapa memperpanjang jQuery? Apa manfaat memperluas jQuery vs hanya memiliki fungsi global?

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

Pendekatan alternatif adalah mem-parsing seluruh string kueri dan menyimpan nilai dalam suatu objek untuk digunakan nanti. Pendekatan ini tidak memerlukan ekspresi reguler dan memperluas window.locationobjek (tetapi, bisa dengan mudah menggunakan variabel global):

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

Versi ini juga menggunakan Array.forEach(), yang tidak tersedia secara native di IE7 dan IE8. Itu dapat ditambahkan dengan menggunakan implementasi di MDN , atau Anda dapat menggunakan jQuery's $.each()saja.


2
Ini tidak umum tetapi valid untuk menggunakan semi-titik koma alih-alih ampersand dalam parameter kueri.
Muhd

@ Muhd ​​- Ini "valid" untuk menggunakan pembatas yang Anda suka dalam querystring selama kode Anda memahaminya. Tetapi, ketika suatu formulir dikirimkan, bidang formulir dikirimkan sebagai name=valuepasangan, dipisahkan oleh &. Jika kode Anda menggunakan format querystring khusus, tentu saja, Anda harus menulis parser querystring khusus di mana pun querystring digunakan, baik di server atau klien.
gilly3

2
@nick - Menarik. Tetapi saran mereka untuk server HTTP untuk memperlakukan semi-titik dua sebagai ampersand hanya berfungsi untuk membuat HTML lebih cantik saat menggunakan tautan untuk meniru pengiriman formulir. Itu hanya saran dan tidak standar. Pengiriman formulir standar GETdikodekan sebagai application/x-www-form-urlencoded, dengan nilai dipisahkan oleh &. Kode saya menangani standar itu. Struktur url khusus seperti yang Anda tautkan membutuhkan sisi server parser dan sisi klien. Apapun, menambahkan kemampuan seperti itu ke kode saya di atas akan sepele.
gilly3

1
@Gilly memang - jika Anda ingin kode portabel Anda harus mendukung keduanya
nick

1
Tambahkan "i" ke RegExp () sehingga kuncinya dapat menjadi case-sensitive: new RegExp ("[? &]" + Key + "= ([^ &] +) (& | $)", "i"));
Yovav

94

Plugin JQuery jQuery-URL-Parser melakukan pekerjaan yang sama, misalnya untuk mengambil nilai param string kueri penelusuran , Anda dapat menggunakan

$.url().param('search');

Perpustakaan ini tidak dikelola secara aktif. Seperti yang disarankan oleh penulis plugin yang sama, Anda dapat menggunakan URI.js .

Atau Anda dapat menggunakan js-url sebagai gantinya. Ini sangat mirip dengan yang di bawah ini.

Jadi, Anda dapat mengakses parameter kueri seperti $.url('?search')


2
Bagus. Dan kodenya ada di domain publik sehingga Anda bahkan tidak perlu memasukkan komentar.
Muhd

4
Solusi yang bagus tetapi tidak akan berfungsi jika Anda menguji melalui file: //
kampsj

1
Apa pun yang harus dilakukan, @kampsj
RameshVel

3
Hai @ kampsj, pengujian dengan file://protokol akan menyebabkan lebih banyak hal tidak berfungsi. Anda dapat membuat server HTML statis yang sangat cepat dan mudah dengan node.js. stackoverflow.com/questions/16333790/…
Jess

2
Plugin ini tidak lagi dipertahankan dan penulis sendiri menyarankan untuk menggunakan plugin lain sebagai gantinya.
JanErikGunnar

77

Temukan permata ini dari teman-teman kami di SitePoint. https://www.sitepoint.com/url-parameters-jquery/ .

Menggunakan PURE jQuery. Saya hanya menggunakan ini dan itu berhasil. Tweak sedikit demi contoh.

//URL is http://www.example.com/mypage?ref=registration&email=bobo@example.com

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //bobo@example.com

Gunakan sesuka Anda.


Bagus. Terima kasih! Saya tidak berpikir Anda perlu tanda kurung kurawal terakhir.
bhtabor

Ahh ya, kamu benar. Mengedit pos. Itu yang tersisa dari beberapa jika pernyataan dalam kode saya. Terima kasih.
ClosDesign

1
Anda harus menggunakan window.location.search daripada .href - jika tidak, bagus.
BrainSlugs83

4
Alih-alih results[1] || 0, Anda harus melakukannya jika (hasil) {hasil kembali [1]} mengembalikan 0; parameter permintaan bcoz mungkin tidak ada sama sekali. Dan memodifikasi akan menangani semua kasus generik.
myDoggyWritesCode

1
Apa yang Anda lakukan jika Anda memiliki sesuatu seperti https://example.com/?c=Order+ID? Tanda plus itu masih ada di fungsi ini.
Volomike

47

Ini bukan contoh kode saya, tapi saya pernah menggunakannya di masa lalu.

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');

2
Anda tidak boleh berpisah pada '=', secara teknis tidak apa-apa untuk memiliki tanda kedua sama dengan nilai setiap pasangan kunci / nilai. - Hanya tanda sama dengan pertama yang Anda temui (per pasangan kunci / nilai) yang harus diperlakukan sebagai pembatas. (Juga, tanda sama dengan tidak diperlukan sepenuhnya; dimungkinkan untuk memiliki kunci tanpa nilai.)
BrainSlugs83

Solusi bersih. Bekerja dengan baik dalam kasus saya.
JF Gagnon

$ .extend ({getUrlVars: function () {var vars = [], hash; var hashes = window.location.href.slice (window.location.href.indexOf ('?') + 1) .split ('& '); untuk (var i = 0; i <hashes.length; i ++) {hash = hashes [i] .split (' = '); var k = hash.shift (); vars.push (k); vars [k] = hash.join ("");} return vars;}, getUrlVar: function (name) {return $ .getUrlVars () [name];}});
Mupinc

15

Saya menulis sedikit fungsi di mana Anda hanya perlu mengurai nama parameter kueri. Jadi, jika Anda memiliki:? Project = 12 & Mode = 200 & date = 2013-05-27 dan Anda ingin parameter 'Mode' Anda hanya perlu menguraikan nama 'Mode' ke dalam fungsi:

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');

Jika nama Anda tidak memiliki sampah, Anda dapat menghapus regex pertama dan lebih masuk akal untuk memulai dari location.search
mplungjan

7

Membangun jawaban @Rob Neild di atas, berikut ini adalah adaptasi JS murni yang mengembalikan objek sederhana dari string string kueri yang diterjemahkan (no% 20's, dll).

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}

Saya belum melihat ada kesalahan menggunakan kode ini. Browser apa yang Anda gunakan? Saya sudah mengujinya terhadap Firefox, Chrome, dan Safari saat ini.

Ya maaf saya salah baca. Saya pikir saya melihatnya memanggil metode pada sesuatu yang kembali tidak terdefinisi. Jadi sebenarnya itu hanya berjalan sekali ketika tidak harus. Kapan pencarian "". Dan Anda mendapatkan {"": "undefined"}
Jerinaw

Ya. Itu mungkin bisa menggunakan pemurnian.

1

Ditulis dalam Vanilla Javascript

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.

1
function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

Saya menggunakan ini.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.