Dapatkan parameter URL lolos


302

Saya mencari plugin jQuery yang bisa mendapatkan parameter URL, dan mendukung string pencarian ini tanpa menghasilkan kesalahan JavaScript: "urutan URI cacat". Jika tidak ada plugin jQuery yang mendukung ini, saya perlu tahu cara memodifikasinya untuk mendukung ini.

?search=%E6%F8%E5

Nilai parameter URL, ketika diterjemahkan, harus:

æøå

(karakternya adalah Bahasa Norwegia).

Saya tidak memiliki akses ke server, jadi saya tidak dapat mengubah apa pun di dalamnya.



1
Alasan Anda mendapatkan "urutan URI cacat" adalah karena sebagian besar fungsi digunakan decodeURIComponent(). Karakter Norwegia kemungkinan besar dikodekan menggunakan sesuatu seperti escape()dan mengubah decodeURIComponent()panggilan ke unescape()harus membantu.
Kevin M

Lihat jawaban saya untuk solusi modern: stackoverflow.com/a/19992436/64949
Sindre Sorhus

Jawaban:


418
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

33
Dengan name = 'bar', saya pikir regexp ini akan cocok 'foobar=10'dan kembali '10'. Mungkin Anda bisa menambahkan '[?|&]'di awal regexp Anda. Bersulang!
Sébastien RoccaSerra

34
fungsi ini mengembalikan 'null' alih-alih nol ketika parameter tidak didefinisikan ... kegembiraan js ...
Damien

12
Anda mungkin menginginkan "decodeURIComponent ()" daripada "decodeURI ()", terutama jika Anda memberikan data menarik seperti URL pengembalian sebagai parameter URL
perfeksionis

25
Ini bagus, tetapi komponen decodeURIC lebih baik, misalnya saya punya tagar (% 23) di param saya yang akan diabaikan oleh decodeURI. Dan saya tidak akan mengembalikan null, tetapi "", karena decodeURI (null) === "null", yang merupakan nilai pengembalian yang aneh, "" lebih baik; Anda dapat melakukannya jika (! getURLParameter ("param")) alih-alih if (getURLParameter ("param") === "null"). Jadi, versi saya yang ditingkatkan: komponen decodeURICon ((RegExp (nama + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
standup75

3
Down memilih sebagai ini mengembalikan string tidak peduli apakah hasilnya ditemukan atau tidak, dan tidak peduli apa yang Anda masukkan sebagai array alternatif misalnya [, null], karena hasil thre dibungkus dalam decodeURI yang mengubah apa pun menjadi string, Sanjeev benar tetapi kodenya tidak diuji dengan benar dan sederhana copy dan paste tidak berfungsi. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz 'Severiaan' Grela

295

Di bawah ini adalah apa yang saya buat dari komentar di sini, serta memperbaiki bug yang tidak disebutkan (seperti benar-benar mengembalikan nol, dan bukan 'nol'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

6
Bagaimana kalau menambahkan newdi depan RegExp? Peringatan kurang serat.
ripper234

18
Ini harus menjadi jawaban yang diterima. Mendapatkan null nyata kembali daripada "null" jauh lebih baik.
Seni

11
Jika ada yang memerlukan ini dikonversi ke naskah: getURLParameter: (name) -> return decodeURICon ((RegExp baru ("[? | &] # {Name} = ([^ &;] + +) (& | ## |; | $) "). exec (location.search) || [null," "]) [1] .replace (/ \ + / g, '% 20')) || null;
Redbeard

1
@Redbeard - Bukankah fungsi Anda memiliki tanda '=' setelah definisi metode, bukan titik dua?
Zippie

1
Ini adalah satu-satunya versi fungsi get-URL-parameter yang berfungsi untuk saya dengan string UTF8.
tentu saja

107

Yang benar-benar Anda inginkan adalah plugin Parser URL jQuery . Dengan plugin ini, mendapatkan nilai parameter URL tertentu (untuk URL saat ini) terlihat seperti ini:

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

Jika Anda menginginkan objek dengan nama parameter sebagai kunci dan nilai parameter sebagai nilai, Anda hanya perlu memanggil param()tanpa argumen, seperti ini:

$.url().param();

Perpustakaan ini juga berfungsi dengan url lain, bukan hanya yang saat ini:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Karena ini adalah seluruh parsing pustaka URL, Anda juga bisa mendapatkan informasi lain dari URL, seperti port yang ditentukan, atau path, protokol, dll:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Ini memiliki fitur lain juga, periksa beranda untuk lebih banyak dokumen dan contoh.

Alih-alih menulis parser URI Anda sendiri untuk tujuan khusus ini yang agak berfungsi dalam kebanyakan kasus, gunakan parser URI yang sebenarnya. Bergantung pada jawabannya, kode dari jawaban lain dapat kembali 'null'sebagai ganti null, tidak berfungsi dengan parameter kosong ( ?foo=&bar=x), tidak dapat menguraikan dan mengembalikan semua parameter sekaligus, mengulangi pekerjaan jika Anda berulang kali meminta URL untuk parameter dll.

Gunakan parser URI yang sebenarnya, jangan buat parser Anda sendiri.

Bagi mereka yang menolak jQuery, ada versi plugin yang murni JS .


23
Pertanyaannya adalah "dapatkan parameter URL dengan jQuery". Jawaban saya menjawab pertanyaan itu. Jawaban lain menginstruksikan pengguna pada dasarnya menulis parser URI sendiri untuk kasus penggunaan khusus ini, yang merupakan ide yang mengerikan. Memilah URI lebih rumit daripada yang dipikirkan orang.
Lucas

2
Ini adalah jawaban yang saya cari, dan sangat jQuery-ish, tidak seperti beberapa jawaban lainnya.
Ehtesh Choudhury

Apakah plugin menangani pengodean URI atau apakah saya harus mendekodekannya secara manual?
Roberto Linares

Pertanyaannya mengatakan "javascript" (saya pikir itu berarti DOM langsung) atau jQuery. Jadi yang lain akan melakukannya.
brunoais

43

Jika Anda tidak tahu akan seperti apa parameter URL dan ingin mendapatkan objek dengan kunci dan nilai yang ada di parameter, Anda bisa menggunakan ini:

function getParameters() {
  var searchString = window.location.search.substring(1),
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
  return hash;
}

Memanggil getParameters () dengan url like /posts?date=9/10/11&author=nilbusakan kembali:

{
  date:   '9/10/11',
  author: 'nilbus'
}

Saya tidak akan memasukkan kode di sini karena lebih jauh dari pertanyaan, tetapi weareon.net memposting perpustakaan yang memungkinkan manipulasi parameter dalam URL juga:


1
Ya, ini lebih baik untuk mendapatkan semua params. Semua solusi lain yang tercantum di sini mengulangi regex untuk setiap param.
Bernard

Fungsi ini mengembalikan objek yang canggung: {"": undefined}ketika URL tidak memiliki parameter. Terbaik untuk mengembalikan objek kosong dengan menggunakan if(searchString=='') return {};langsung setelah searchStringpenugasan.
Jordan Arseno

40

Anda dapat menggunakan properti location.search asli browser :

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return unescape(val[1]);
    }
  }
  return null;
}

Tetapi ada beberapa plugin jQuery yang dapat membantu Anda:


4
Ini jauh lebih bersih dan lebih mudah dibaca (dan mungkin lebih bebas bug) daripada semua regex one-liners.
Timmmm

8
Saya akan menyarankan untuk menggunakan decodeURIComponent () daripada unescape ()
freedev

+1 ini berfungsi untuk peramban modern tetapi beberapa pengembang perlu bekerja dengan ...: | IE8: S.
brunoais

25

Berdasarkan jawaban 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Perubahan:

  • decodeURI() diganti dengan decodeURIComponent()
  • [?|&] ditambahkan di awal regexp

3
Mungkin bermanfaat bagi orang lain jika Anda bisa menjelaskan mengapa Anda melakukan perubahan ini. Thx
Timm

3
Tidak menangani params kosong: ?a=&b=1. Regexp yang lebih baik adalah:"[?&]"+name+"=([^&]*)"
serg

6

Perlu menambahkan parameter i untuk membuatnya tidak sensitif huruf:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

3

Setelah membaca semua jawaban saya berakhir dengan versi ini dengan + fungsi kedua untuk menggunakan parameter sebagai flag

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

2
Jawaban Bagus, namun hanya satu peringatan. Per JSHint, [, ""] dapat menyebabkan masalah untuk peramban yang lebih lama. Jadi, gunakan [null, ""] atau [undefined, ""]. Masih ada beberapa dari kita yang tidak puas yang mendukung IE8 dan berani saya katakan itu IE7.
Delicia Brummitt

2
$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");

2

Misalnya, fungsi yang mengembalikan nilai variabel parameter apa pun.

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

Dan ini adalah bagaimana Anda dapat menggunakan fungsi ini dengan asumsi URL-nya adalah,

"http://example.com/?technology=jquery&blog=jquerybyexample".

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

Jadi dalam variabel kode di atas "tech" akan memiliki "jQuery" sebagai nilai dan variabel "blog" akan menjadi "jquerybyexample".


2

Anda seharusnya tidak menggunakan jQuery untuk hal seperti ini!
Cara modern adalah dengan menggunakan modul kecil yang dapat digunakan kembali melalui manajer paket seperti Bower.

Saya telah membuat modul kecil yang dapat mem-parsing string kueri ke dalam objek. Gunakan seperti ini:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

Jika Anda mengatakan tidak modern untuk memiliki kerangka kerja, itu tidak masalah. Tetapi menurut saya kerangka kerja benar-benar memiliki tempat mereka. jQuery terlihat kurang dan kurang cantik bagiku.
Lodewijk

0

Ada banyak kode buggy di sini dan solusi regex sangat lambat. Saya menemukan solusi yang bekerja hingga 20x lebih cepat daripada rekan regex dan elegan sederhana:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex bukan solusi semua-dan-semua-akhir, untuk jenis masalah manipulasi string sederhana dapat bekerja dalam jumlah besar lebih efisien. Sumber kode .


0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)atau getURLParameter(Id)Bekerja sama :)


0

Cuplikan kode jQuery untuk membuat variabel dinamis disimpan di url sebagai parameter dan menyimpannya sebagai variabel JavaScript yang siap digunakan dengan skrip Anda:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

example.com?param1=name&param2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

-1
function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();  
    if (sURL.indexOf("?") > 0)
    {
       var arrParams = sURL.split("?");         
       var arrURLParams = arrParams[1].split("&");      
       var arrParamNames = new Array(arrURLParams.length);
       var arrParamValues = new Array(arrURLParams.length);     
       var i = 0;
       for (i=0;i<arrURLParams.length;i++)
       {
        var sParam =  arrURLParams[i].split("=");
        arrParamNames[i] = sParam[0];
        if (sParam[1] != "")
            arrParamValues[i] = unescape(sParam[1]);
        else
            arrParamValues[i] = "No Value";
       }

       for (i=0;i<arrURLParams.length;i++)
       {
                if(arrParamNames[i] == paramName){
            //alert("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}

-1

Saya membuat fungsi sederhana untuk mendapatkan parameter URL dalam JavaScript dari URL seperti ini:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

KELUARAN: 18


2
Hati-hati saat memposting salin dan tempel jawaban boilerplate / kata demi kata untuk beberapa pertanyaan, ini cenderung ditandai sebagai "spam" oleh komunitas. Jika Anda melakukan ini, biasanya itu berarti pertanyaannya adalah duplikat, jadi tandailah sebagai berikut: stackoverflow.com/a/11808489/419
Kev

-1

Kalau-kalau kalian punya url seperti localhost / index.xsp? A = 1 # sesuatu dan Anda perlu mendapatkan param bukan hash.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

-1

Sedikit modifikasi pada jawaban oleh @pauloppenheim, karena tidak akan menangani nama parameter dengan benar yang dapat menjadi bagian dari nama parameter lainnya.

Misalnya: Jika Anda memiliki parameter "appenv" & "env", ulang nilai untuk "env" dapat mengambil nilai "appenv".

Memperbaiki:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

-2

Ini bisa membantu.

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>

1
Kode ini tidak diuji dengan baik. Coba tebak apa yang terjadi dengan permintaan?twothrids=text
Lyth
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.