GET parametrelerinden değer nasıl alınır?


1327

Aşağıdaki gibi bazı GET parametreleri ile bir URL var:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

Bütün değerini almalıyım c. URL'yi okumaya çalıştım, ama sadece aldım m2. JavaScript kullanarak bunu nasıl yapabilirim?


Yeni bir yanıt göndermeden önce, bu soru için zaten 50'den fazla yanıt olduğunu düşünün. Lütfen yanıtınızın mevcut yanıtlar arasında yer almayan bilgilere katkıda bulunduğundan emin olun.
janniks

Yanıtlar:


1998

JavaScript'in kendisinde sorgu dizesi parametrelerini işlemek için yerleşik bir şey yoktur.

(Modern) bir tarayıcıda çalışan kod, URLnesneyi kullanabilirsiniz (tarayıcılar tarafından JS'ye sağlanan API'ların bir parçasıdır):

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);


Daha eski tarayıcılar için (Internet Explorer dahil), bu çoklu dolguyu veya bu cevabın orijinal versiyonundan önceki kodu kullanabilirsiniz URL:

Sen erişebilecek location.searchsizi verecekti, ?URL'nin sonuna veya hangisi önce betimleyicinin (#foo), başlamadan üzerindeki karakteri.

Sonra bununla ayrıştırabilirsiniz:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

Sorgu dizesini geçerli sayfanın URL'sinden şu şekilde alabilirsiniz:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

Eski tarayıcılar içinURL , ek tarayıcıya ek olarak bir çoklu dolguya ihtiyacınız olabilir URLSearchParams. Ya da var c = url.searchParams.get("c");yukarıdaki cevaptaki satırı yerine koyarak bu sorunu atlayabilirsiniz var c = new URLSearchParams(window.location.search).get("c");.
evanrmurphy

parse_query_string, bir base64 kodlanmış değeri değer olarak iletirken olduğu gibi '=' içeren değerler için başarısız olur. Aşağıdaki düzenli ifadeyi kullanan sürüm daha iyi çalışır.
Manel Clos

7
@Jamland - Kesinlikle bunu yapmayın. Bir şeyleri kıracak. Canlı bir demo new URL() , argümanı olarak düzgün bir şekilde kodlanmış bir URL almayı bekliyor. URL'nin tamamını değil, bir URL'nin decodeURIComponentbir bileşenini geçirmeyi umuyor .
Quentin

@Quentin Farklı özel karakterleri kontrol ettim ve haklı olduğunu görüyorum. decodeURIComponentbu durumda kullanılmamalıdır
Jamland

1
parse_query_stringFonksiyon bir çift decode yapar value. =@ManelClos bahsettiği çıkarılan ikinci bir parametre ilave ele alınabilir 2( limitkadar) vars[i].split().
Jake

242

Gördüğüm çoğu uygulama, URL kod çözme adlarını ve değerlerini kaçırıyor.

Doğru URL kod çözme işlemini de yapan genel bir yardımcı program işlevi şunlardır:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

3
Bu kod çalışmıyor. Regex, geçerli dizini sıfırlayan döngü tanımında derlendiğinden sonsuz bir döngü oluşturur. Normal ifadeyi döngü dışındaki bir değişkene koyarsanız düzgün çalışır.
maxhawkins

2
@maxhawkins: Bazı tarayıcılarda çalışır, bazılarında ise sonsuz döngüye girer. Bu konuda yarı haklısın. Kodu çapraz tarayıcı olarak düzeltirim. Bunu işaret ettiğiniz için teşekkürler!
Ateş Goral

3
@ZiTAL Bu işlev URL'nin tamamı ile değil, bir URL'nin sorgu kısmı ile birlikte kullanılır. Aşağıdaki açıklamalı kullanım örneğine bakın.
Ateş Goral

1
@Harvey Case duyarsızlığı sorgu parametreleriyle ilgili değildir. Sorgu parametresi çıkarmasıyla birlikte veya üstüne uygulanması gereken uygulamaya özgü bir şey gibi geliyor.
Ateş Göral

7
Neden qs.split('+').join(' ');olmasın qs.replace(/\+/g, ' ');?
FlameStorm

234

kaynak

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

8
En iyi bu seçeneği seviyorum, ancak boş veya dize değil null veya sonuç döndürmeyi tercih edin.
Jason Thrasher

1
Görünüşe göre fazladan kaçış karakterin var. "\\[" olmalı "\[". Bunlar normal dizeler olduğundan, [ve] 'den kaçmasına gerek yoktur.
EricP

Bu büyük / küçük harfe duyarlı değildir. Büyük / küçük harfe duyarsız hale getirmek için "i" yi nereye eklerim?
zeta

alert (gup ('UserID', window.location.href));
Arun Prasad ES

6
@mottie ölü bağlantı
invot

202

Bu, yalnızca bir parametreyi kontrol etmenin kolay bir yoludur:

Örnek URL:

    http://myserver/action?myParam=2

Örnek Javascript:

    var myParam = location.search.split('myParam=')[1]

URL'de "myParam" varsa ... myParam değişkeni "2" içerecektir, aksi takdirde tanımsız olacaktır.

Belki bu durumda varsayılan bir değer istersiniz:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

Güncelleme: Bu daha iyi çalışır:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
    var result = captured ? captured : 'myDefaultValue';

Ve URL parametrelerle dolu olsa bile doğru çalışır.


36
Bu yalnızca yakaladığınız parametre URL'de güvenmemeniz gereken son parametre ise işe yarar (yalnızca bir parametre bekliyorsanız bile). örneğin http://myserver/action?myParam=2&anotherParam=3vermez "2"ama "2&anotherParam=3".
Buzullar

39
(location.search.split('myParam=')[1]||'').split('&')[0]- birden fazla parametre ile kullanmak veya muhtemelen eksik myParam .
Gábor Imre

veyalocation.search.split('myParam=').splice(1).join('').split('&')[0]
J.Steve

1
Daha hassas kazanmak ve birlikte ekleyerek bu parametrelerin herhangi sırasını izin verebilir [?|&]gibi[?|&]myParam=([^&]+)
1.21 Gigavat

1
Değeri deşifre etmeniz gerekebilirresult = decodeURIComponent(result);
1.21 gigawatts

126

Tarayıcı satıcıları bunu URL ve URLSearchParams aracılığıyla yapmanın yerel bir yolunu uyguladılar.

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

Şu anda Firefox, Opera, Safari, Chrome ve Edge'de desteklenmektedir. Tarayıcı desteğinin listesi için buraya bakın .

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

Eric Bidelman, Google'da bir mühendis, önerir bu kullanarak polyfill desteklenmeyen tarayıcılar için.


MDN bağlantılarına göre Safari destek URL'si ancak URLSearchParams değil.
Mark Thomson

3
@Markouver Çoklu dolgu bununla ilgilenmiyor mu? BTW, Safari günümüz IE6
Csaba Toth

Neden bana new URLSearchParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5").get('a')geri dönüyor null? (Chrome'da kararlı). bve ciyi çalışıyor gibi görünüyor.
ripper234

Cevap güncellendi. Orijinal yanıtım, URL'nin yalnızca sorgu dizesi kısmı ile çalışmak üzere tasarlandığından URLSearchParams'ı doğru şekilde kullanmıyordu.
cgatian

1
url.searchParamsBunun yerine kullanın new URLSearchParams(url.search).
Caio Tarifa

86

Bunu çok önce buldum, çok kolay:

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

Sonra şöyle deyin:

var fType = getUrlVars()["type"];

7
+1 mükemmel çözüm - zarif, verimli ve akıllı kullanım koşullarıdır. Benim amacım için kabul edilen diğer çözümden daha iyi
Elemental

kısa + basit + güçlü = harika
mzy

1
Çok güzel, ayrıca window.location.href yerine location.search kullanarak da çalışıyor
Fabio C.

1
@pdxbmw İşe yaramaz ve kaldırılması gerekir. Kod ilk bakışta akıllı görünebilir, ancak çok iyi düşünülmüş değildir. Geliştirmeler: decodeURIComponent()Değer üzerinde kullanın , çünkü genellikle çalışmak istediğiniz şey budur; window.location.searchbunun yerine kullanın window.location.href, çünkü tüm parametrelerle değil, yalnızca parametrelerle ilgilenirsiniz.
Leif

2
@Yaşam öneri harika çalıştı. Bir ID 142 # alıyordum çünkü URL'nin sonunda bir düğme tıklamasıyla oluşturulan # oldu. Fonksiyonu böyle bırakmakvar vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;
Andres Ramos

77

Sorgu dizesini location.searchgirebilir, ardından soru işaretinden sonra her şeyi bölebilirsiniz:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

3
Parametre adlarının ve değerlerinin URL kodunu çözmeye ne dersiniz?
Ateş Goral

Bu yaklaşım dizileri ele almaz. Örneğin açıkça yanlış olan ?array[]=1&array[]=2üretir {"array[]": "2"}.
Mart'ta Kafoso

@Kafoso Burada açık ya da yanlış bir şey yok. Her şeyden önce, aynı adlara sahip tekrarlanan alanların belirli bir standart davranışı yoktur ve işleyecek ayrıştırıcıya bağlıdır. Ek olarak, []desenin sadece bazı durumlarda bir anlamı vardır (örn. PHP), ancak diğerleri değil. Yani "açıkça yanlış" değil - sadece ele almanız gerekebilecek veya gerekmeyebilecek standart dışı bir durumu işlemek için uygulanmamıştır.
Blixt

38

Daha basit ve zarif bir çözüm yazdım.

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

Şuna bakın, iki satır, kalayda söylediklerini tam olarak yapar - ve birisi güvenlik açıklarını araştırmaya çalışıyorsa ve bu çözümlerin birkaçından farklı bir sürü ekstra karakter ve sorgu eklerse kırılmaz. Şerefe ahbap!
David G

Bu işi doğru ve sadece 2 satırda yapar. Mükemmel cevap!
Andres Ramos

Boş için diğer bir kontrol dahil için kullanışlı olacağını düşünüyorum. Değilse, bir örnek burada: stackoverflow.com/a/36076822/1945948 (Bir düzenleme girişimi reddedildi).
atw

Anlamıyorum ... Bu, 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5' adlı belirli bir dizeden paramayla ilgili soruya nasıl cevap veriyor?
mike kemirgen

Bu cevabı sevdim, + 1'ed. Sadece bir öneri [0-9] için değiştirebilirsiniz\d
gmanjon

31

URLSearchParams'ı kullanmanın çok basit bir yolu .

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

Şu anda Chrome, Firefox, Safari, Edge ve diğerlerinde desteklenmektedir .


Hatayı alın: Edge'de çalışırken 'SCRIPT5009:' URLSearchParams 'tanımlı değil'.
Andreas Presthammer

@AndreasPresthammer Hangi kenar sürümü?
spencer.sm

@ spencer-sm Microsoft Edge 41.16299.820.0
Andreas Presthammer

Önceden onaylanmış URL parametreleriyle çalışmaz
ii iml0sto1

@ iiiml0sto1 "Önceden onaylanmış URL parametreleri" nedir?
spencer.sm

30

Burada regex olmayan ve minimum mutasyona sahip özyinelemeli bir çözüm (sadece params nesnesi mutasyona uğramıştır, bu da JS'de kaçınılmaz olduğuna inanıyorum).

Harika çünkü:

  • Özyinelemeli
  • Aynı adda birden çok parametreyi işler
  • Hatalı biçimlendirilmiş parametre dizeleriyle iyi anlaşılır (eksik değerler, vb.)
  • '=' Değerdeyse kırılmaz
  • URL kod çözme gerçekleştirir
  • Ve son olarak, harika çünkü ... argh !!!

Kod:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

31
Sen ... iki kere tekrarlı dedin.
Muhalif Öfke

Bir sonraki url'deki ilk parametreyi bulamıyor: www.mysite.com?first=1&second=2
url'deki

Merhaba Mario, işte bu URL ile çalıştığını gösteren bir JSFiddle: jsfiddle.net/q6xfJ - Bir hata bulduysanız, bu tarayıcıya özgü mü? Test ederken, verdiğim yanıtın URL'nin '? First = 1 & second = 2' kısmı olan location.search kullandığını lütfen unutmayın. Şerefe :)
Jai

45
Bir şeyin neden iyi olduğunu görmüyorum, çünkü özyinelemeli.
Adam Arold

6
Erm, sanırım oradaki şaka özlemini kaçırdın Adam. Her ne kadar şimdi herkes özleyecek çünkü edi9999 ikinci "özyinelemeli" kaldırıldı.
Jai

27

Bunu yapan bir işlev yaptım:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

Güncelleme 5/26/2017, işte bir ES7 uygulaması (babel hazır ayar aşaması 0, 1, 2 veya 3 ile çalışır):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

Bazı testler:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

Güncelleme 3/26/2018, İşte bir daktilo uygulaması:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

Güncelleme 2/13/2019, işte TypeScript 3 ile çalışan güncellenmiş bir TypeScript uygulaması.

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

Sorgu parametreleri olmayan bir URL'de bu döndürülürObject {"": ""}
Ilya Semenov

2
Bana yeterince temiz görünüyor. Cevapların geri kalanı, yeterince açıklama yapmadan çok fazla "sihir" dir.
Levi Roberts

Bu harika bir cevap!
Spencer Bigum

Teşekkürler @SpencerBigum!
Nate Ferrero

24

Bunu gör

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("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

1
Teşekkürler. Ben jscript yeniyim ve bu oldukça yararlı olacaktır.
Brian B.

20

ECMAScript 6 çözümü:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

Güzel. Bilginize, bu bir Harita olduğu için kullanım params.get ("key");
evanmcd

Sevdim ama muhtemelen ilk parametreyi alamayacak. function urlParams(url) { const [, searchParams = ''] = url.split('?') return searchParams.split('&') .map(v => v.split('=')) .reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map())
Örneğinize

11

kullanırım

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

Lütfen biraz açıklama ekleyin. Cevabınız şu anda "düşük kalite" olarak işaretlenmiş ve eninde sonunda kaldırılabilir.
Johannes Jander

URL'nin sonunda '#id' gibi bir dize varsa ve 'somevalue # id' gibi son parametre değerini döndürdüğümü buldum
Ayano

@ Ario window.location.searchhash gibi içermez #id.
Fancyoung

@Fancyoung Evet, haklısın. Sonucu yerine .Thank location.hrefyerine kullanmak için bir hata yaptım location.search.
Ayano

11

Kullandığım parseUri kütüphanesi. Tam olarak ne istediğinizi yapmanızı sağlar:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

9

İşte benim çözümüm. Andy E'nin bu soruyu cevaplarken önerdiği gibi, sadece tek bir değer elde etmek için sürekli olarak çeşitli regex dizeleri, döngüler vb. Böylece, tüm GET parametrelerini tek bir nesnede döndüren daha basit bir komut dosyası buldum. Bunu sadece bir kez çağırmalı, sonucu bir değişkene atamalı ve daha sonra, herhangi bir noktada, uygun anahtarı kullanarak o değişkenden istediğiniz herhangi bir değeri almalısınız. Ayrıca, URI kod çözme işlemine (yani% 20 gibi şeyler) dikkat eder ve + 'yı boşlukla değiştirir:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

İşte, betiğin görmeniz için birkaç test:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

.replace ("+", "") yalnızca ilk tekrarlamanın yerini alacaktır .replace (/ \ + / g, "") kullanmanız gerekir;
Tony

8

Veya URI ayrıştırma tekerleği kullanımını yeniden keşfetmek istemiyorsanız URI.js

Foo adlı bir parametrenin değerini almak için:

new URI((''+document.location)).search(true).foo

Bu ne yapar

  1. Document.location öğesini bir dizeye dönüştür (bir nesne)
  2. Bu dizeyi URI.js'nin URI sınıfı yorumlayıcısına besleyin
  3. URL'nin arama (sorgu) kısmını almak için search () işlevini çağırın
    (true iletildiğinde bir nesnenin çıktısını almasını söyler)
  4. Değeri almak için elde edilen nesne üzerindeki foo özelliğine erişin

İşte bunun için bir keman .... http://jsfiddle.net/m6tett01/12/


8

İçin Tek Parametre Değer bu index.html gibi? Msg = 1 kullanımlık bir kodla takip

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

For All Parametre Değer kullanım, Code aşağıdaki

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

1
Bu çözümü seviyorum!
alemur

8

Burada bir örnek gönderiyorum. Ama jQuery'de. Umarım başkalarına yardımcı olur:

<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"
});
</script>

1
Diğer gönderinizden kopyalandı: "url eklentisi gerekiyor: plugins.jquery.com/url"
zeta

8

En kısa yol:

new URL(location.href).searchParams.get("my_key");

2
Herhangi bir URL'nin ilk sorgu parametresini alırken ikincisi başarısız olacağı için new URL(location.href).searchParams.get("my_key")üzerinde kullanmayı tercih ederim URLSearchParams.
Travis Clarke

1
Her iki varyantı da test etti. Size katılıyorum. Cevabı düzenledi.
Zon

7

Bu sorunun çok fazla cevabı var, bu yüzden başka bir tane ekliyorum.

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

kullanımı:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

bu, boş parametrelerle (bunlar olmadan mevcut olan anahtarlar "=value"), hem skaler hem de dizi tabanlı değer alma API'sinin gösterilmesinin yanı sıra uygun URI bileşeni kod çözme ile de başa çıkabilir .


7

replace()Yöntemi kullanmanın en kolay yolu :

Gönderen urlStrdize:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

veya mevcut URL'den :

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

Açıklama:

  • document.URL - arayüz belge konumunu (sayfa url'si) bir dize olarak döndürür.
  • replace()- yöntemi, bir kalıbın bazı veya tüm eşleşmelerinin yerini bir değiştirme ile değiştiren yeni bir dize döndürür .
  • /.*param_name=([^&]*).*/- eğik çizgiler arasında bulunan düzenli ifade deseni:
    • .* - sıfır veya daha fazla karakter,
    • param_name= - serched olan param adı,
    • () - düzenli ifadede grup,
    • [^&]*- bir veya daha fazla karakter hariç &,
    • | - dönüşüm,
    • $1 - düzenli ifadedeki ilk gruba gönderme.

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);


1
Güzel bir çözüm, ancak parametre bulunmazsa, tüm dize döndürülür. Bu durumda "tanımsız" beklenir.
pensan

1
Merhaba @pensan, harika yorumunuz için teşekkür ederim. Normal ifadeye, parametre URL'de görünmediğinde durumun işlenmesini eklerim. Bu durumda emty dizesini alırız (tam dizeyi değil).
simhumileco

6

Yine başka bir öneri.

Zaten bazı iyi cevaplar var, ama onları gereksiz yere karmaşık ve anlaşılması zor buldum. Bu kısa, basittir ve URL'deki belirteç adlarına karşılık gelen anahtar adlarıyla basit bir ilişkilendirilebilir dizi döndürür.

Öğrenmek isteyenler için aşağıdaki yorumların yer aldığı bir sürüm ekledim.

Bu forEach yerine önerdiğim döngü için jQuery ($ .each) dayanmaktadır. Eski tarayıcılarda hangi yeni işlevlerin desteklenmediğini desteklemek için bireysel düzeltmeleri takmak yerine jQuery kullanarak çapraz tarayıcı uyumluluğunu sağlamayı daha kolay buluyorum.

Düzenleme: Bu yazdıktan sonra ben genel olarak (yukarıda belirtilen nedenlerle) iken ben ForEach kullanır olsa da, neredeyse aynı olan Eric Elliott'ın cevabını fark ettim.

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

Yorumlanan sürüm:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

Aşağıdaki örnekler için bu adresi kabul edeceğiz:

http://www.example.com/page.htm?id=4&name=murray

URL belirteçlerini kendi değişkeninize atayabilirsiniz:

var tokens = getTokens();

Ardından, aşağıdaki gibi adlarla her URL belirtecine bakın:

document.write( tokens['id'] );

Bu "4" yazdıracaktır.

Doğrudan işlevden doğrudan bir belirteç adına da başvurabilirsiniz:

document.write( getTokens()['name'] );

... "cinayet" basar.


6
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    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;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

Buradan var: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html


6

Basit yol

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

sonra getParams (url)


5

Bir URL GET değişkeni okumak ve url parametresine dayalı bir eylemi tamamlamak gerekiyordu. Bir çözüm bulmak için yüksek ve düşük aradım ve bu küçük kod parçasına rastladım. Temel olarak geçerli sayfa URL'sini okur, URL'de düzenli bir ifade gerçekleştirir ve URL parametrelerini kolayca erişebileceğimiz ilişkilendirilebilir bir diziye kaydeder.

Yani bir örnek olarak, aşağıdaki altta javascript bulunan aşağıdaki url varsa.

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

İd ve ​​page parametrelerini almak için tek yapmamız gereken şudur:

Kurallar:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

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

Çalıştığım için teşekkürler
OJB1

5
// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

Bu, ilk parametreyi '?' İle döndürür.
Pini Cheyni

5

Eldon McGuinness tarafından hazırlanan bu Gist, şimdiye kadar gördüğüm bir JavaScript sorgu dizesi ayrıştırıcısının en eksiksiz uygulamasıdır.

Ne yazık ki, bir jQuery eklentisi olarak yazılmıştır.

Bunu vanilya JS'ye yeniden yazdım ve birkaç iyileştirme yaptım:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

Ayrıca bkz bu Fiddle .


Javascript hakkında anlamadığım şey, neden URL ayrıştırma işlevlerini bir dilin içine veya en azından bir standart kütüphanesine yapmamış ve koymamıştır? düşük seviyeli şeyler ilke, tekrar tekrar keşfedilmemeli veya geliştirecekleri entropik olarak varyant çözümleri ne kullanacakları için bırakılmamalıdır. Bu sağlamsa, standart kütüphaneye böyle bir şey yapılmalıdır. Bu, javascript'te beni dile çeviren şeylerin bir örneğidir.
ahnbizcad

5

Zarif, işlevsel stil çözümü

URL parametresi adlarını anahtar olarak içeren bir nesne oluşturalım, sonra parametreyi adına göre kolayca çıkarabiliriz:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

Bunu seviyorum, ancak azaltma işlevinde akümülatörü iade etmeden emin olmadan benim için çalışmadı
Ella

@Ella bir yazım hatasıydı, olmadan çalışmanın bir yolu yokreturn

Şimdi daha iyi görünüyor, umarım ilk sayfaya geçersiniz!
Ella

4

İşte yaptığım şey:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.