Bagaimana cara mendapatkan parameter URL menggunakan jQuery atau JavaScript biasa?


619

Saya telah melihat banyak contoh jQuery di mana ukuran dan nama parameter tidak diketahui.

URL saya hanya akan memiliki 1 string:

http://example.com?sent=yes

Saya hanya ingin mendeteksi:

  1. Apakah sentada
  2. Apakah sama dengan "ya"?




Solusi terbaik yang pernah saya lihat [di sini] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani

1
Sekarang ada plugin / perpustakaan untuk ini, yang disebut URI.js: github.com/medialize/URI.js
alexw

Jawaban:


1211

Solusi terbaik di sini .

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

Dan ini adalah bagaimana Anda dapat menggunakan fungsi ini dengan asumsi URL adalah
http://dummy.com/?technology=jquery&blog=jquerybyexample,.

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

8
Terima kasih! Tetapi ketika menyalin ini, saya menemukan kejutan yang tidak menyenangkan, melibatkan spasi kosong nol-lebar (\ u200b) menjelang akhir di sana. Membuat skrip memiliki kesalahan sintaksis yang tidak terlihat.
Christofer Ohlsson

11
Kembalikan falseatau nulluntuk pencarian kosong
Stefano Caravana

4
Solusi ini bekerja cukup baik untuk saya. Saya baru saja menggunakan var sPageURL = decodeURI (window.location.search.substring (1)); untuk mengubah% 20 karakter menjadi spasi putih dan saya juga mengembalikan string kosong daripada parameter apa pun jika tidak cocok.
Christophe

18
Saya telah memperbarui jawaban untuk memasukkan semua perubahan kode komentar di atas komentar ini.
Rob Evans

7
Decoding harus dilakukan pada nilai parameter (seperti yang disarankan Iouri). Jika decoding dilakukan pada url (seperti pada jawaban), itu tidak akan berfungsi dengan benar jika ada yang dikodekan &atau =dalam nilai parameter.
zakinster

288

Solusi dari 2020

Kami memiliki: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

Apakah terkirim ada ?

searchParams.has('sent') // true

Apakah sama dengan "ya"?

let param = searchParams.get('sent')

dan kemudian bandingkan saja.


16
saya pikir ini tidak didukung di seluruh browser jadi mengapa kita harus menggunakannya? referensi - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ

1
@ p_champ Anda benar. Tetapi Anda dapat menggunakan polyfill untuk URLSearchParams
Optio

2
saat ini tidak bekerja di IE / Edge, begitu juga deteksi fitur: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} Lihat di sini
mfgmicha

4
Cukup baik untuk saya dan audiens yang saya tuju. caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge mendapat dukungan di v17 (April 2018). Biarkan IE mati.
Ryan DuVal

198

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;
    }
    return decodeURI(results[1]) || 0;
}

example.com?param1=name¶m2=&id=6

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

contoh params dengan spasi

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



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

12
Catatan: Anda harus men-decode jika ada karakter khusus sebagai parameter atau Umlaute dll. Jadi, bukannya return results[1] || 0;seharusnyareturn decodeURI(results[1]) || 0;
Kai Noack

Hanya ingin tahu, mengapa perlu || 0bagian karena sudah ada cek untuk hasilnya, bukankah itu selalu mengembalikan array pertandingan?
AirWick219

@ AirWick219 sebuah failafe yang sesuai. meskipun berlebihan, tidak ada salahnya untuk berhati
zanderwar

2
Inilah kemungkinan besar sumber aslinya: sitepoint.com/url-parameters-jquery tetapi jawaban ini menambahkan beberapa gagasan baru
bgmCoder

1
Tidak yakin layak menggunakan jQuery untuk ini.
Quentin 2

88

Saya selalu menempel ini sebagai satu baris. Sekarang params memiliki vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

multi-baris:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

sebagai fungsi

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

yang dapat Anda gunakan sebagai:

getSearchParams()  //returns {key1:val1, key2:val2}

atau

getSearchParams("key1")  //returns val1

Retas buruk yang mengubah string pencarian ... tetapi tidak ada modul atau jquery eksternal yang diperlukan. Saya suka itu.
Bryce

4
@ Bryce Ini sebenarnya tidak mengubah string pencarian. the .replace sebenarnya mengembalikan string baru dan string yang dikembalikan diproses ke objek params.
AwokeKnowing

Bagus, pendek dan, bertentangan dengan solusi yang diterima, tidak perlu mem-url url setiap kali Anda membutuhkan suatu nilai. Bisa sedikit ditingkatkan dengan replace(/[?&;]+([^=]+)=([^&;]*)/gimerekonstruksi ";" karakter sebagai pemisah juga.
Le Droid

satu-liner yang jelas dan tidak menyakitkan, lebih baik daripada jawaban yang diterima untuk saya, tidak ada lib ekstra.
Sam

Inilah yang akan digunakan orang jika menggunakan hash alih-alih GET-pembatas kueri (tanda tanya): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); Ini berguna untuk hal-hal seperti AJAX di mana hash di jendela diperbarui dengan ajax-permintaan tetapi satu juga satu pengguna untuk pergi ke uri mengandung hash.
Tommie

48

Namun fungsi alternatif lain ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

nama harus berupa string. Bekerja seperti pesona ~
mintedsky

2
Ini adalah favorit saya. +1 Dari catatan, meskipun ini adalah jenis "berakhir dengan" pencarian. Misalnya, jika Anda memasukkan "Telepon" untuk nama itu, dan ada juga bidang yang disebut "HomePhone" itu dapat mengembalikan nilai yang salah jika datang pertama di url.
efreed

2
Ini salah! Misalnya param('t') == param('sent') == 'yes'dalam contoh OP. Inilah perbaikannya return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]:; Perhatikan juga bahwa Anda tidak dapat mengetahui apakah param ada karena Anda mendapatkan string kosong untuk parameter yang hilang.
oriadam

Sangat sederhana dan elegan. Bekerja seperti mimpi. Terima kasih.
Anjana Silva

// (untuk memaksa kunci penuh agar tetap eksis, bukan hanya bagian terakhir dari kunci itu)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

45

Mungkin sudah terlambat. Tetapi metode ini sangat mudah dan sederhana

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990 -->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')      // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')       // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});

UPDATE
Membutuhkan plugin url: plugins.jquery.com/url
Terima kasih -Ripounet


2
Siapa pun yang memutuskan ini harus memeriksa repo terlebih dahulu. Penggunaan telah berubah. $ .url.attr ('message') menjadi $ .url ("query") dan hanya memberikan kueri lengkap! Untuk mendapatkan hanya satu parameter, saya harus: $ .url ("query"). Split ("=") [1] url tautan github
pseudozach

34

Atau Anda dapat menggunakan fungsi kecil yang rapi ini, karena mengapa solusi terlalu rumit?

function getQueryParam(param, defaultValue = undefined) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (defaultValue = item.split("=")[1], true)
        })
    return defaultValue
}

yang terlihat lebih baik ketika disederhanakan dan online:

tl; solusi satu jalur dr

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
hasil:
queryDict ['terkirim'] // tidak terdefinisi atau 'nilai'

Tetapi bagaimana jika Anda memiliki karakter yang disandikan atau kunci multinilai ?

Anda sebaiknya melihat jawaban ini: Bagaimana saya bisa mendapatkan nilai string kueri dalam JavaScript?

Menyelinap puncak

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"

3
string split cenderung lebih cepat dari regex juga. Bukan berarti itu adalah faktor mengingat url hanya akan diurai satu kali.
Patrick

Ini adalah solusi (yang pertama) yang bekerja sempurna untuk saya di seluruh browser - terima kasih!
NickyTheWrench

1
@NickyTheWrench Senang mendengarnya, terima kasih! Pokoknya, ketahuilah bahwa ini adalah solusi yang sangat sederhana, jika Anda mendapatkan param url rumit yang berisi karakter khusus, Anda lebih baik memeriksa tautan yang disediakan.
Qwerty

@Qwerty yup - use case saya sangat sederhana di mana parameternya selalu sama, dll (pada dasarnya persis seperti yang diminta OP) Terima kasih lagi!
NickyTheWrench

1
@BernardVanderBeken Menarik, saya memperbaikinya, bagaimanapun, itu solusi yang agak sangat bodoh, yang di bagian bawah yang mendukung karakter dan array yang dikodekan jauh lebih baik.
Qwerty

33

Menggunakan URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

Hati-hati dengan kompatibilitas (Sebagian besar baik-baik saja, tapi IE dan Edge, mungkin cerita yang berbeda, periksa ini untuk referensi yang kompatibel: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )


Tidak sebagian besar browser dapat menggunakan ini.
saf21

URLSearchParams menggantikan karakter khusus "+" dengan spasi. Jadi jika param url Anda memiliki "+" di dalamnya, itu akan diganti.
Growler

11

Yang ini sederhana dan bekerja untuk saya

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

jadi jika url Anda http://www.yoursite.com?city=4

coba ini

console.log($.urlParam('city'));

10

Mungkin Anda ingin memberi tampilan pada Dokter Gigi JS ? (penafian: saya menulis kode)

kode:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

dengan Dentist JS, Anda pada dasarnya dapat memanggil fungsi ekstrak () pada semua string (mis. document.URL.extract ()) dan Anda mendapatkan kembali HashMap dari semua parameter yang ditemukan. Ini juga dapat disesuaikan untuk berurusan dengan pembatas dan semua.

Versi yang diperkecil <1kb


5

Saya harap ini akan membantu.

 <script type="text/javascript">
   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;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>

5

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}



3

Ada perpustakaan hebat ini: https://github.com/allmarkedup/purl

yang memungkinkan Anda untuk melakukannya secara sederhana

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

Contohnya dengan asumsi Anda menggunakan jQuery. Anda juga dapat menggunakannya seperti javascript biasa, sintaks kemudian akan sedikit berbeda.


1
Perpustakaan ini tidak dipelihara lagi, namun saya menggunakannya dan itu hebat. Pastikan Anda menggunakan param bukan attr untuk mendapatkan parameter string kueri tersebut, karena penulis telah memasukkan dalam contoh mereka.
Aksi Dan

3

Ini mungkin berlebihan, tapi ada perpustakaan yang cukup populer sekarang tersedia untuk parsing URI, disebut URI.js .

Contoh

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>


3

Sangat sederhana Anda dapat menggunakan url apa saja dan mendapatkan nilai

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Contoh Penggunaan

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

Catatan: Jika suatu parameter hadir beberapa kali (? First = value1 & second = value2), Anda akan mendapatkan nilai pertama (value1) dan nilai kedua sebagai (value2).


2

Ini akan memberi Anda objek yang bagus untuk bekerja

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

Lalu;

    if (queryParameters().sent === 'yes') { .....

split (/ \? | \ & /) ini artinya
Selva Ganapathi

2

Ini didasarkan pada jawaban Gazoris , tetapi URL menerjemahkan parameter sehingga mereka dapat digunakan ketika mengandung data selain angka dan huruf:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

2

Ada contoh lain dengan menggunakan perpustakaan URI.js.

Contoh menjawab pertanyaan persis seperti yang ditanyakan.

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>


2
http://example.com?sent=yes

Solusi terbaik di sini .

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

Dengan fungsi di atas, Anda bisa mendapatkan nilai parameter individual:

getUrlParameter('sent');

Jawaban Sempurna!
Srijani Ghosh

1

Versi Coffeescript dari jawaban Sameer

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++

1

Sedikit perbaikan pada jawaban Sameer, cache params menjadi penutup untuk menghindari penguraian dan perulangan melalui semua parameter setiap kali memanggil

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();

1

Saya menggunakan ini dan itu berhasil. http://codesheet.org/codesheet/NF246Tzs

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
return vars;
}


var first = getUrlVars()["id"];

1

Dengan JavaScript vanilla, Anda dapat dengan mudah mengambil params (location.search), dapatkan substring (tanpa?) Dan mengubahnya menjadi array, dengan membaginya dengan '&'.

Saat Anda mengulanginya melalui urlParams, Anda kemudian dapat membagi string lagi dengan '=' dan menambahkannya ke objek 'params' sebagai objek [elmement [0]] = elemen [1]. Super sederhana dan mudah diakses.

http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];

1

Bagaimana jika ada & dalam parameter URL seperti nama file = "p & g.html" & uid = 66

Dalam hal ini fungsi ke-1 tidak akan berfungsi dengan baik. Jadi saya memodifikasi kodenya

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}

1

Memang saya menambahkan jawaban saya ke pertanyaan yang terlalu banyak dijawab, tetapi ini memiliki kelebihan:

- Tidak tergantung pada pustaka luar, termasuk jQuery

- Tidak mencemari namespace fungsi global, dengan memperluas 'String'

- Tidak membuat data global dan melakukan pemrosesan yang tidak perlu setelah kecocokan ditemukan

- Menangani masalah pengkodean, dan menerima (dengan asumsi) nama parameter yang tidak dikodekan

- Menghindari forloop eksplisit

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

Maka Anda akan menggunakannya sebagai:

var paramVal = "paramName".urlParamValue() // null if no match

1

Jika Anda ingin menemukan parameter tertentu dari url tertentu:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));

0

Solusi lain yang menggunakan jQuery dan JSON, sehingga Anda dapat mengakses nilai parameter melalui objek.

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

Dengan asumsi URL Anda adalah http://example.com/?search=hello+world&language=en&page=3

Setelah itu tinggal menggunakan parameter seperti ini:

param.language

mengembalikan

en

Penggunaan yang paling berguna dari ini adalah menjalankannya pada pemuatan halaman dan memanfaatkan variabel global untuk menggunakan parameter di mana pun Anda mungkin membutuhkannya.

Jika parameter Anda berisi nilai numerik maka parsing nilainya.

parseInt(param.page)

Jika tidak ada parameter paramhanya akan menjadi objek kosong.



-1

Gunakan ini

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
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.