JavaScriptで「GET」リクエストパラメータを取得するにはどうすればよいですか?


回答:


185

すべてのデータは以下で利用可能です

window.location.search

文字列を解析する必要があります。

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

GET変数名をパラメーターとして関数を呼び出すだけです。

get('foo');

この関数は、変数に値がないか、変数が存在しない場合、変数の値または未定義を返します。


@Daniel Silveira:はい、値をデコードする(そして名前をエンコードする)ことができます/すべきです。すぐに私の投稿を編集します
Rafael

2
decodeURIComponentは/ all /可能なURIエスケープをデコードしないことに注意してください。特に、「+」は「」としてデコードされません。(これがどのブラウザーにあったか忘れています。FF、多分?)仕様では、encodeUIRComponentがエンコードするものだけを正確にデコードする必要があり、 ""を "%20"としてエンコードするため、 "+"はそのままにします。
Jesse Rusak

これが私がPHPが好きな理由です
ymakux 2014年

2
@volocugaはPHPとは異なり、JavaScriptでURLを処理することは非常にまれな操作であるため、ブラウザーベンダーはこれらの機能に実際に焦点を当てることはありません。
ラファエル

見事に答えたラファエル;)
Jalal Sordo 2016

36

あなたはjquery.url私がこのようにしたのを使うことができました:

var xyz = jQuery.url.param("param_in_url");

ソースコードを確認してください

更新されたソース:https//github.com/allmarkedup/jQuery-URL-Parser


1
素晴らしい答えですが、あなたのリンクは死んでいます
Adam Casey

@アダムそれはそう見えるでしょう。これは更新されたURLだと思います:github.com/allmarkedup/jQuery-URL-Parser Mark Perkins jquery.urlをグーグル検索すると、更新されました。必要に応じて、この回答を投稿したときのソースがあります。
カオス2013

3
それで、プラグインが必要ですか?
JohnK 2014

var xyz = jQuery.url().param("param_in_url");jQuery.url()現在のページのURLを示す正しい構文です。訂正してください。
Ahmed Akhtar 2017

13

すべてのリクエストを含むオブジェクトが必要な場合は、2セントを入れるだけです

function getRequests() {
    var s1 = location.search.substring(1, location.search.length).split('&'),
        r = {}, s2, i;
    for (i = 0; i < s1.length; i += 1) {
        s2 = s1[i].split('=');
        r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
    }
    return r;
};

var QueryString = getRequests();

//if url === "index.html?test1=t1&test2=t2&test3=t3"
console.log(QueryString["test1"]); //logs t1
console.log(QueryString["test2"]); //logs t2
console.log(QueryString["test3"]); //logs t3

各getパラメータのキーは小文字に設定されていることに注意してください。そこで、ヘルパー関数を作成しました。したがって、大文字と小文字は区別されません。

function Request(name){
    return QueryString[name.toLowerCase()];
}

1
この方法が本当に好きです。+1
TR3B 2015

12

以下のコードを試してください。URLからGETパラメータを取得するのに役立ちます。 詳細については。

 var url_string = window.location.href; // www.test.com?filename=test
    var url = new URL(url_string);
    var paramValue = url.searchParams.get("filename");
    alert(paramValue)

location.hash部分のため、例localhost:8080 /#/?access_token = 111では機能しません。「#」記号が発生した場合location.searchは空です
Maksim Tikhonov 2018

「#」記号の付いたURLはサポートされていないため、削除する必要があります。これを試してください:var url_string = window.location.href; // www.test.com?filename=test var url = new URL(url_string.replace( "#/"、 "")); var paramValue = url.searchParams.get( "access_token"); alert(paramValue)
VISHNU Radhakrishnan 2018

Internet Explorerではサポートされていません
SebastianScholle20年

5

URLを使用してGET変数を取得できます。特に、window.location.search「?」の後(およびそれを含む)のすべてを与えます。window.locationの詳細については、こちらをご覧ください


3

今日、私は一緒に以下を入れて少しして、連想配列の中に、ページのリクエストパラメータを取得するために必要な、ヘルプからの私の 友人。また、=asなしでパラメータを処理しますtrue

例を挙げて:

// URL: http://www.example.com/test.php?abc=123&def&xyz=&something%20else

var _GET = (function() {
    var _get = {};
    var re = /[?&]([^=&]+)(=?)([^&]*)/g;
    while (m = re.exec(location.search))
        _get[decodeURIComponent(m[1])] = (m[2] == '=' ? decodeURIComponent(m[3]) : true);
    return _get;
})();

console.log(_GET);
> Object {abc: "123", def: true, xyz: "", something else: true}
console.log(_GET['something else']);
> true
console.log(_GET.abc);
> 123

2

現在のページのURLを解析して、GETパラメーターを取得できます。URLは、を使用して見つけることができますlocation.href


サーバーが別の場所にリダイレクトした可能性があるため、これは完全に信頼できるわけではないことに注意してください。しかし、それはあなたができる最善のことです。
Joel Coehoorn 2009年


2

map-reduceソリューション:

var urlParams = location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
    }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
    }, {});

使用法:

For url: http://example.com?one=1&two=2
console.log(urlParams.one) // 1
console.log(urlParams.two) // 2

1
これにmap-reduceソリューションを使用する理由を教えてください。私が理解している限り、map-reduceは、非常に大きなデータセットを処理するときに効率的です。これは単なるHTTPリクエストであるため、map-reduceソリューションを使用する意味がわかりません。
JorgeGRC 2015

実際にmap/reduceは、コレクション処理メカニズムにすぎません。任意のサイズのデータ​​で使用できます。それが原因並列化するという意欲にビッグデータのためのより有名である
StephenBoesch

1

他の回答とは異なり、UrlSearchParamsオブジェクトは正規表現やその他の文字列操作の使用を回避でき、最新のブラウザで使用できます。

var queryString = location.search
let params = new URLSearchParams(queryString)
// example of retrieving 'id' parameter
let id = parseInt(params.get("id"))
console.log(id)

この回答を他の回答ともう少し区別するために、説明を追加していただけますか?
GiulioCaccin20年

0

ここでの関数は、名前でパラメーターを返します。小さな変更で、ベースURL、パラメーター、またはアンカーを返すことができるようになります。

function getUrlParameter(name) {
    var urlOld          = window.location.href.split('?');
    urlOld[1]           = urlOld[1] || '';
    var urlBase         = urlOld[0];
    var urlQuery        = urlOld[1].split('#');
    urlQuery[1]         = urlQuery[1] || '';
    var parametersString = urlQuery[0].split('&');
    if (parametersString.length === 1 && parametersString[0] === '') {
        parametersString = [];
    }
    // console.log(parametersString);
    var anchor          = urlQuery[1] || '';

    var urlParameters = {};
    jQuery.each(parametersString, function (idx, parameterString) {
        paramName   = parameterString.split('=')[0];
        paramValue  = parameterString.split('=')[1];
        urlParameters[paramName] = paramValue;
    });
    return urlParameters[name];
}

0

私のために働く

url:http:// localhost:8080 /#/?access_token = 111

function get(name){
  const parts = window.location.href.split('?');
  if (parts.length > 1) {
    name = encodeURIComponent(name);
    const params = parts[1].split('&');
    const found = params.filter(el => (el.split('=')[0] === name) && el);
    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
  }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.