jQueryまたはプレーンJavaScriptを使用してURLパラメータを取得するにはどうすればよいですか?


619

パラメータのサイズと名前が不明なjQueryの例をたくさん見ました。

私のURLには1つの文字列しかありません:

http://example.com?sent=yes

検出したい:

  1. ないsent存在?
  2. 「はい」に等しいですか?




私が今まで見た中で最高のソリューション[ここ] [1] [1]:stackoverflow.com/a/901144/3106590
hmfarimani

1
これに、URI.jsと呼ばれるプラグイン/ライブラリがあります:github.com/medialize/URI.js
alexw

回答:


1211

ここでの最善の解決策。

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]);
        }
    }
};

そして、これは、URLがであると想定してこの関数を使用する方法です
http://dummy.com/?technology=jquery&blog=jquerybyexample

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

8
ありがとう!しかし、これをコピーすると、最後の方にゼロ幅の空白(\ u200b)が含まれるという厄介な驚きが見つかりました。スクリプトを作成すると、目に見えない構文エラーが発生します。
Christofer Ohlsson 2014

11
空の検索に対してa falseまたはnullを返す
Stefano Caravana、2015

4
このソリューションは私にとってかなりうまく機能します。var sPageURL = decodeURI(window.location.search.substring(1));を使用したところです。%20文字を空白に変換し、パラメーターが一致しない場合は何も表示せずに空の文字列を返します。
クリストフ

18
回答を更新して、このコメントの上にすべてのコメントコードの変更を含めました。
Rob Evans

7
(Iouriが示唆するように)デコードはパラメーター値に対して行われる必要があります。解読がURLで行われた場合(回答のように)、エンコードされている&=、パラメータ値にある場合、正しく機能しません 。
zakinster

288

2020年からのソリューション

私たちは:http : //example.com?sent=yes

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

DOESは送信さ が存在を

searchParams.has('sent') // true

それは等しく「はい」に?

let param = searchParams.get('sent')

そしてそれを比較します。


16
これはブラウザ間でサポートされていないと思うので、なぜそれを使用する必要があるのですか?参照- developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ

1
@p_champ正解です。ただし、URLSearchParamsに
Optio

2
現在IE / Edgeでは機能しないため、機能検出を行います。 if ('URLSearchParams' in window) { // Browser supports URLSearchParams} ここを参照してください
mfgmicha

4
私と私の意図する聴衆にとって十分です。caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edgeはv17(2018年4月)でサポートされました。IEを死なせます。
Ryan DuVal

198

URLにパラメーターとして格納されている動的変数を取得し、スクリプトで使用できるJavaScript変数として格納するためのjQueryコードスニペット:

$.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

スペースを含むパラメータの例

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



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

12
注:あなたは、などのパラメータやウムラウトなどの特殊文字がある場合には、デコードに必要なので、代わりにreturn results[1] || 0;それがあるべきreturn decodeURI(results[1]) || 0;
カイノアック

奇妙なこと|| 0に、結果のチェックが既にあるので、なぜその部分が必要なの ですか?常に一致配列を返しませんか?
AirWick219 2016年

@ AirWick219は適切なフェイルセーフです。冗長ですが、用心深いことは決して

2
おそらく、元のソースはsitepoint.com/url-parameters-jqueryです が、この回答にはいくつかの新しいアイデアが追加されています
bgmCoder

1
このためにjQueryを使用する価値があるかどうかはわかりません。
クエンティン

88

私はいつもこれを一行にしています。これでparamsは変数を持っています:

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

マルチライン:

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

関数として

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

これは次のように使用できます。

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

または

getSearchParams("key1")  //returns val1

検索文字列を変更する醜いハック...外部モジュールやjqueryは必要ありません。私はそれが好きです。
ブライス2015年

4
@Bryce実際には検索文字列は変更されません。.replaceは実際には新しい文字列を返し、返された文字列はparamsオブジェクトに処理されます。
2015年

素晴らしく、短く、受け入れられているソリューションとは異なり、値が必要になるたびにURLを再解析する必要はありません。replace(/[?&;]+([^=]+)=([^&;]*)/gi";"を再調整することで、少し改善できます。セパレーターとしての文字も。
Le Droid、2016

明確で痛みのないワンライナー、私にとって受け入れられた答えよりも優れており、余分なライブラリはありません。
サム・

これは、GETクエリの区切り文字(疑問符)の代わりにハッシュを使用する場合に使用します。 var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); これは、ウィンドウのハッシュがajax要求で更新されるAJAXなどの場合に便利ですが、ユーザーがURIに移動するときにも使用できます。ハッシュを含みます。
トミー

48

さらに別の代替機能...

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

名前は文字列である必要があります。〜の魅力のように働いた
mintedsky

2
これは私のお気に入りです。+1注目に値しますが、これは「次で終わる」タイプの検索です。たとえば、名前に「Phone」を渡し、「HomePhone」というフィールドもある場合、URLの最初に来ると、間違った値を返すことがあります。
efreed

2
これは間違っています!たとえばparam('t') == param('sent') == 'yes'、OPの例です。ここに修正があります:return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; また、欠落しているパラメーターに対して空の文字列を取得するため、パラメーターが存在するかどうかを判別できないことにも注意してください。
oriadam

とてもシンプルでエレガント。夢のように機能します。ありがとうございました。
Anjana Silva

//(キーの最後の部分だけではなく、完全なキーを強制的に存在させるため)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

45

手遅れかもしれません。しかし、この方法は非常に簡単でシンプルです

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

更新に
はurlプラグインが必要です:plugins.jquery.com/url
ありがとう-Ripounet


2
これを決定する人は、最初にリポジトリを確認する必要があります。使用方法が変更されました。$ .url.attr( 'message')は$ .url( "query")になり、完全なクエリのみを提供します!$ .url( "query")。split( "=")[1] url github link
pseudozach

34

または、なぜこの複雑な小さな関数を使用できますか?なぜ複雑すぎるソリューションなのですか?

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
}

簡略化して1行に並べるとさらに見栄えがよくなります。

tl; dr 1行ソリューション

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
結果:
queryDict ['sent'] //未定義または 'value'

しかし、エンコードされた文字または複数値のキーがある場合はどうでしょうか。

あなたはこの答えをよく見ます:JavaScriptでクエリ文字列値を取得するにはどうすればよいですか?

スニークピーク

"?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
文字列分割は、正規表現よりも高速である可能性があります。これは、URLが一度だけ解析されることを考慮した要素ではありません。
Patrick

これは、ブラウザー全体で私にとって完璧に機能したソリューション(最初のソリューション)です。ありがとうございます。
NickyTheWrench

1
@NickyTheWrenchありがとうございます!とにかく、これは非常に単純な解決策であることに注意してください。特殊文字を含む複雑なURLパラメータを取得する場合は、提供されたリンクを確認することをお勧めします。
Qwerty '11年

@Qwerty yup-パラメータが常に同じである場合など、私のユースケースは非常にシンプルです(基本的に、OPが要求したものとまったく同じです)ありがとうございます!
NickyTheWrench

1
@BernardVanderBeken興味深いことに、私はそれを修正しました。とにかく、それはかなり非常にばかげたソリューションです。エンコードされた文字と配列をサポートする一番下のソリューションの方がはるかに優れています。
Qwerty、

33

使用URLSearchParams

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

互換性に注意してください(ほとんどは問題ありませんが、IEとEdgeは異なる場合があります。互換性の参照については、こちらをご覧くださいhttps : //developer.mozilla.org/en-US/docs/Web/API/URLSearchParams


ほとんどのブラウザはこれを使用できません。
saf21

URLSearchParamsは、特殊文字「+」をスペースに置き換えます。したがって、URLパラメータに「+」が含まれている場合は、置き換えられます。
グロウラー

11

これはシンプルで私のために働いた

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

だからあなたのURLがhttp://www.yoursite.com?city=4の場合

これを試して

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

10

おそらくあなたは歯科医のJSを見てみたいかもしれませんか?(免責事項:私はコードを書いた)

コード:

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"

Dentist JSでは、基本的にすべての文字列(たとえばdocument.URL.extract())に対してextract()関数を呼び出すことができ、見つかったすべてのパラメーターのHashMapを返します。区切り文字などすべてを処理するようにカスタマイズすることもできます。

縮小バージョン<1kb


5

これがお役に立てば幸いです。

 <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

この素晴らしいライブラリがあります:https : //github.com/allmarkedup/purl

簡単にできる

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
     // ...
   }
}

この例は、jQueryを使用していることを前提としています。プレーンなJavaScriptとしても使用できます。構文は少し異なります。


1
このライブラリはもうメンテナンスされていませんが、私はそれを使用しています。これらのクエリ文字列パラメータを取得するには、作者が例に含めているように、必ずattrではなくparamを使用してください。
アクションダン

3

これはやり過ぎかもしれませんが、URI.jsと呼ばれる、URIの解析に使用できるかなり人気のあるライブラリがあります。

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

とてもシンプルなので、任意のURLを使用して値を取得できます

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

使用例

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

注:パラメーターが複数回存在する場合(?first = value1&second = value2)、最初の値(value1)と2番目の値は(value2)として取得されます。


2

これにより、作業に適したオブジェクトが得られます

    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;
    }

その後;

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

スプリット(?/ \ | \&/)この手段
セルヴァGanapathi

2

これはGazorisの回答に基づいていますが、URLはパラメータをデコードするため、数字や文字以外のデータが含まれている場合でも使用できます。

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

URI.jsライブラリを使用した別の例があります。

例では、質問どおりに質問に答えます。

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

ここでの最善の解決策。

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, '    '));
};

上記の関数を使用すると、個々のパラメーター値を取得できます。

getUrlParameter('sent');

完璧な答え!
Srijani Ghosh

1

Sameerの回答のCoffeescriptバージョン

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

Sameerの回答を少し改善し、paramsをクロージャーにキャッシュして、呼び出しのたびにすべてのパラメーターの解析とループを回避

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

バニラJavaScriptを使用すると、パラメーター(location.search)を簡単に取得し、部分文字列(?なし)を取得して、 '&'で分割することで配列に変換できます。

urlParamsを反復処理するときに、文字列を「=」で再度分割し、それをobject [elmement [0]] = element [1]として「params」オブジェクトに追加できます。とてもシンプルで簡単にアクセスできます。

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

filename = "p&g.html"&uid = 66のようなURLパラメータに&がある場合はどうなりますか

この場合、1番目の機能は正しく動作しません。だから私はコードを変更しました

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

確かに私は過剰回答の質問に私の回答を追加していますが、これには次の利点があります。

-jQueryを含む外部ライブラリには依存しません

-'String'を拡張して、グローバル関数の名前空間を汚染しない

-グローバルデータを作成せず、一致が見つかった後に不要な処理を行う

-エンコードの問題の処理、およびエンコードされていないパラメーター名の受け入れ(想定)

-明示的なforループを回避する

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;
};

次に、次のように使用します。

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

1

特定のURLから特定のパラメーターを検索する場合:

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

jQueryとJSONを使用する別のソリューション。オブジェクトを介してパラメーター値にアクセスできます。

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);
}

あなたのURLが http://example.com/?search=hello+world&language=en&page=3

その後は、次のようなパラメーターを使用するだけです。

param.language

戻る

en

これの最も有用な使用法は、ページの読み込み時にそれを実行し、グローバル変数を使用して、必要な場所でパラメーターを使用することです。

パラメータに数値が含まれている場合は、値を解析するだけです。

parseInt(param.page)

パラメータがない場合はparam、空のオブジェクトになります。


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

&が「&amp;」として誤ってエンコードされている 上記の回答では、正しい回答を参照してください。stackoverflow.com
a /

-1

これを使って

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.