JavaScriptでクエリ文字列値を取得するにはどうすればよいですか?


2697

プラグインを使用せずにjQueryを介して(またはなしで)クエリ文字列値を取得する方法はありますか?

もしそうなら、どうですか?そうでない場合、それを行うことができるプラグインはありますか?


jQuery-Plugin – getUrlParam(バージョン2)で説明されているプラグインgetUrlParamを使用します。
コマ

69
プレーンなJavaScriptの正規表現のないソリューション:css-tricks.com/snippets/javascript/get-url-variables
ロレンツォPolidori

6
jQueryが不要であるという優れた観察により、質問に対するトップのソリューションは人気に値しますが、新しい正規表現を作成し、必要なすべてのパラメーターのクエリ文字列を再解析する方法は非常に非効率的です。はるかに効率的(かつ多用途)ソリューションは、この記事では、ここに転載以内例えば、長い時間のために存在している:htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/...
ジョセフ・マイヤーズ


4
ジョセフ、「jQueryは必要ないという優れた観察」?もちろん必要ありません。jQueryはすべてを行い、JavaScriptを使用して行います。jQueryは、JavaScriptではできないことを行うため、人々は使用しません。jQueryのポイントは便利です。
Vladimir Kornea 2014年

回答:


8327

更新:2018年9月

URLSearchParamsを使用できます。URLSearchParamsはシンプルで、まともな(ただし完全ではありません)ブラウザーサポートがあります。

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

元の

そのためにjQueryは必要ありません。いくつかの純粋なJavaScriptのみを使用できます。

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: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


注:パラメーターが複数回存在する場合(?foo=lorem&foo=ipsum)、最初の値(lorem)を取得します。これに関する標準はなく、使用方法はさまざまです。たとえば、次の質問を参照してください:重複するHTTP GETクエリキーの権限のある位置
注:関数では大文字と小文字が区別されます。大文字と小文字を区別しないパラメータ名を使用する場合は、RegExpに「i」修飾子を追加します


これは、同じ結果をより簡潔に達成するための、新しいURLSearchParams仕様に基づく更新です。以下の「URLSearchParams」というタイトルの回答を参照してください。


131
この関数はどのように処理しhttp://www.mysite.com/index.php?x=x1&x=x2&x=x3ますかフィールドの値xがあいまいです。
dpp、2011

94
これも多値キーを処理しないため、これも完全に合法です。
急いでmaplelad

17
なぜこれに正規表現を使うのですか?
Ry-

28
のクエリ文字列の?mykey=0&m.+key=1場合、呼び出しgetParameterByName("m.+key")はの0代わりに戻ります1。正規表現を作成するname前に、正規表現のメタ文字をエスケープする必要があります。また.replace()、グローバルフラグを使用"\\$&"し、置換式として使用することで、1回呼び出すだけで済みます。のlocation.search代わりに検索する必要がありlocation.hrefます。400以上の賛成票を持つ回答では、これらの詳細を説明する必要があります。
gilly3

7
そのため、またはその他の目的でjQueryは必要ありません。実際には必要ありません。
gztomas 2013年

1708

ここに掲載されているソリューションの一部は非効率的です。スクリプトがパラメーターにアクセスする必要があるたびに正規表現検索を繰り返す必要はまったくありません。パラメーターを連想配列スタイルのオブジェクトに分割する単一の関数で十分です。HTML 5 History APIを使用していない場合、これはページの読み込みごとに1回だけ必要です。ここでの他の提案も、URLを正しくデコードできません。

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

クエリ文字列の例:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

結果:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

これは、配列スタイルのクエリ文字列も処理できるように簡単に改善できます。これの例はこちらですが、配列スタイルのパラメーターはRFC 3986で定義されいないため、この回答をソースコードで汚染することはありません。「汚染された」バージョンに関心のある人は、以下のキャンベルンの回答をご覧ください

また、コメントで指摘されているように、;key=valueペアの有効な区切り文字です。;or を処理するにはより複雑な正規表現が必要ですが、使用される&こと;はまれであるため不要だと思います。両方が使用される可能性はさらに低いと言えます。の;代わりにサポートする必要がある場合&は、正規表現でそれらを交換してください。


サーバー側の前処理言語を使用している場合は、ネイティブのJSON関数を使用して、面倒な作業を行うことができます。たとえば、PHPでは次のように記述できます。

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

はるかに簡単です!

更新しました

新しい機能は、次のように繰り返しパラメータを取得することmyparam=1&myparam=2です。仕様はありませんが、現在のアプローチのほとんどは配列の生成に従います。

myparam = ["1", "2"]

だから、これはそれを管理するためのアプローチです:

let urlParams = {};
(window.onpopstate = function () {
    let match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) {
            return decodeURIComponent(s.replace(pl, " "));
        },
        query = window.location.search.substring(1);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

11
Ajaxを多用しているアプリを実行している場合は、ハッシュ(#)を使用して「戻るボタンを有効にする」ことができます。 ..これらのソリューションは#の後に来るものを無視しますが...
Nick Franceschina

100
@Nick:ハッシュの後のすべては、window.location.hashプロパティとは別のwindow.location.searchプロパティにあります。ハッシュが変更されても、クエリ文字列にはまったく影響しません。
アンディE

27
はGET ペアの有効な区切り文字;あることを忘れないでください。まれですが、実装に5秒かかります。key=value
アレックス

4
公平を期すために、クエリ文字列の特定の形式はRFC3986で定義されていません。 ?a=b&c=dは従来型であり、Webフォームに対するW3Cの推奨事項ですが、URI仕様では単にを定義していますquery = *( pchar / "/" / "?" )
マシューギリアード2013年

21
JSHintのかなり厳密な設定を使用している私たちにとっては、while(match = search.exec(query))と交換してくださいwhile((match = search.exec(query)) !== null)
2013

1283

ES2015(ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

jQueryなし

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

のようなURLを使用する?topic=123&name=query+stringと、以下が返されます。

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Googleメソッド

Googleのコードを引き裂くと、彼らが使用する方法が見つかりました。 getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

難読化されていますが、理解できます。一部の変数が定義されていないため、機能しません。

彼らは?、ハッシュから、そしてハッシュからもURLのパラメーターを探し始めます#。次に、各パラメーターを等号で分割しますb[f][p]("=")(これはのようindexOfに見えますが、charの位置を使用してキー/値を取得します)。分割すると、パラメータに値があるかどうかが確認され、値がdある場合はの値が保存されます。それ以外の場合は続行されます。

最後にオブジェクトdが返され、エスケープと+記号が処理されます。このオブジェクトは私のものと同じで、動作は同じです。


jQueryプラグインとしての私のメソッド

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

使用法

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

パフォーマンステスト(正規表現メソッドに対する分割メソッド)jsPerf

準備コード:メソッド宣言

テストコードの分割

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

正規表現テストコード

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Windows Server 2008 R2 / 7 x64上のFirefox 4.0 x86でのテスト

  • スプリット方式:144,780±2.17%最速
  • 正規表現法:13,891±0.85%| 90%遅い

1
これは、正規表現を使用する代わりに文字列を分割するという素晴らしいアプローチでもあります。ただし、注意が必要な点がいくつかあります:-) 1. unescapeは非推奨の関数であり、に置き換えられています。decodeURIComponent()これらの関数はどちらも+aをスペース文字に正しくデコードしないことに注意してください。2. JavaScript自体には連想配列がないため、結果として配列ではなくオブジェクトとして結果を宣言する必要があります。宣言した配列は、とにかく名前付きプロパティを割り当てることによってオブジェクトとして扱われます。
Andy E

55
jQuery固有のコードがないのに、なぜこれをjQueryプラグインにするのか知りたいですか?
zachleat

63
@zachleatフレームワークがない場合、関数はコード全体に広がるだけです。jQueryを拡張する場合、関数のスコープがあり、コードのどこかに浮かんでいません。それが唯一の理由だと思います。
BrunoLM

6
以下は、JSLintを渡すために調整されたjQueryバージョンです(少なくとも2011-06-15のJSLint.comの準移​​動ターゲット)。ほとんどの場合、物事を動かしてザ・クロックフォードをなだめます。
パトリッジ

3
@BenjaminGruenbaumが冗談を言ったように、私もURL解析のパフォーマンスをベンチマークするポイントがあまりわかりません。これが同型のJavaScriptモジュールになり、Nodeから、たとえばログを解析するために呼び出すことができる場合、はい。ただし、URLからのパラメータの抽出に使用するとwindow.location、URLに移動するクライアントがはるかに高価になることを考えると、パフォーマンスに関する懸念はなくなります。
Dan Dascalescu、2015年

659

Artem Bargerの回答の改良版:

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

改善の詳細については、http//james.padolsey.com/javascript/bujs-1-getparameterbyname/を参照してください。


23
もう少し短くしたい場合は、3項条件式を廃止して、最後の行の少しの短絡に置き換えることができます- return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
アンディE

nullパラメータの後ろに「=」がない場合に返されます。あなたは先頭に追加可能性がありif (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;、それを返すにするためにboolean falseそこにすべてのパラメータイマイチ場合。
commonpike

9
私が使用するnew正規表現を作成するときにプレフィックスを:var match = new RegExp('...
パトリック・バークレー

2
IE11のバグ:IEは、戻り値の先頭にASCII文字8206(16進:200E-「左から右への文字」)を付加することにしました。これを見つけるのに6時間以上も無駄にしました!治療通気修正へ...、最後の行の末尾にタック:.replace('\u200E', '')
JAYRO-老い

Macのクロムでは、少なくとも(おそらく他のブラウザでも)最後の値に「/」が付加されていました。だから私はそれを無視するように正規表現を修正した。var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
CaseyB 2016年

594

URLSearchParams

Firefox 44以降、Opera 36以降、Edge 17以降、Safari 10.3以降、Chrome 49以降では、URLSearchParams APIをサポートしてます。

IEの安定バージョンには、Googleが推奨するURLSearchParamsポリフィルがあります。

これはW3Cによって標準化されていませんが、WhatWGによる生きた標準です

あなたはそれを使うことができますlocation

let params = new URLSearchParams(location.search);

または

let params = (new URL(location)).searchParams;

またはもちろん、任意のURL:

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

次の.searchParamsように、URLオブジェクトの省略プロパティを使用してパラメータを取得することもできます。

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

あなたは読み/セットパラメータを経由get(KEY)set(KEY, VALUE)append(KEY, VALUE)API。すべての値を反復処理することもできますfor (let p of params) {}

リファレンス実装サンプルページが監査およびテストのために利用可能です。


(私はちょうど行ったように)おそらく逃したこれら2 downvotersあなたが使用する必要があるという事実.getだけではなくの.
Nakilon

20
実際にはslice(1)on にする必要はなく.search、直接使用できます。URLSearchParamsは先頭を処理でき?ます。
Jason C

URLSearchParamsURLのパラメーターの実際の値を返さないため、これは良くありません。
Melabの2017

これnew URL('https://example.com?foo=1&bar=2') はandroidのurlでは機能しませんfile:///android_asset/...
shah

@Melabそれでも、ここで他の回答にあるすべての奇妙な正規表現にシンプルなAPIを提供するという点で優れています。しかし、それはまた、デフォルトではidがwindow.location.searchを実行せず、含まれている現在のURLを更新する方法がないことにも奇妙です。
デイモン

400

ちょうど別の推奨事項。プラグインPurlを使用すると、アンカー、ホストなど、URLのすべての部分を取得できます。

jQueryの有無にかかわらず使用できます。

使い方はとてもシンプルでクールです:

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

ただし、2014年11月11日以降、Purlは保守されなくなったため、代わりにURI.jsを使用することをお勧めします。jQueryプラグインは、要素に重点を置いている点が異なります。文字列を使用URIする場合は、jQueryの有無にかかわらず、直接使用するだけです。同様のコードは次のようになります。詳細なドキュメント次のとおりです

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

7
執筆時点では、purlは保守されておらず、以前の保守者はuri.jsを
Dan Pantry

238

tl; dr

複数の値を持つキーエンコードされた文字を処理する迅速で完全なソリューション

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
マルチライン:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

このすべてのコードは何ですか...
"null-coalescing"短絡評価
ES6 割り当ての破壊矢印関数テンプレート文字列

例:
"?a=1&b=0&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"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

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



続きを読む... Vanilla JavaScriptソリューションについて。

URLのさまざまな部分にアクセスするには location.(search|hash)

最も簡単な(ダミー)ソリューション

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • 空のキーを正しく処理します
  • 最後に見つかった値でマルチキーを上書きします
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

多値キー

簡単なキーチェック (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • 代わりに配列を返すようになりました。
  • qd.key[index]またはによって値にアクセスするqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

エンコードされた文字?

decodeURIComponent()2番目または両方の分割に使用します。

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
例:
"?a=1&b=0&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"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]



コメントから

* !!! これdecodeURIComponent(undefined)はstring を返すことに注意してください"undefined"。解決策はの簡単な使用法にあり&&decodeURIComponent()未定義の値でが呼び出されないようにします。(上部の「完全なソリューション」を参照してください。)

v = v && decodeURIComponent(v);


クエリ文字列が空(location.search == "")の場合、結果はやや誤解を招きqd == {"": undefined}ます。次のように解析関数を起動する前に、クエリ文字列を確認することをお勧めします。

if (location.search) location.search.substr(1).split("&").forEach(...)

1
いいね。私が変更する唯一のことは、キーに複数の値がない場合、それが配列である必要はないということです。キーごとに複数の値がある場合にのみ配列を使用します。
Pavel Nikolov 2014年

2
@PavelNikolov私はそれが時々配列と時々値を取得する難しさを導入すると思います いずれにしてもこれらの値を取得するためにサイクルを使用するため、最初にそれをチェックする必要がありますが、今は長さのみをチェックします。また、これは、ここで最も簡単でありながら機能的なソリューションであることを意味していました。
Qwerty、2014年

@katshはい、確かに、IE9以上で動作しますがarray.forEach()、スクリプトの先頭に特定のコードを挿入することで、JavaScriptプロセッサを教えることができます。ポリフィル参照developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
QWERTY配列の

1
読みやすくするために少し平坦化し、関数にし、分割呼び出しを再利用しました。function parseQueryString(){var qd = {}; location.search.substr(1).split( "&")。forEach(function(item){var parts = item.split( "="); var k = parts [0]; var v = decodeURIComponent(parts [ 1]);(qd in qd)?qd [k] .push(v):qd [k] = [v、]}); qdを返す; }
ケーシー

1
decodeDocumentURI(undefined)は、未定義ではなく「未定義」を返します。機能的ではあるがエレガントではないパッチ: var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
ループ

218

snipplr.comのRoshamboには、jQueryを使用してURLパラメータを取得するで説明されているこれを達成するための簡単なスクリプトがあります。改善された。彼のスクリプトを使用すると、必要なパラメーターだけを簡単に引き出すこともできます。

ここに要点があります:

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

次に、クエリ文字列からパラメーターを取得します。

したがって、URL /クエリ文字列がだった場合xyz.com/index.html?lang=de

を呼び出すだけvar langval = $.urlParam('lang');で、あなたはそれを手に入れました。

UZBEKJONには、jQueryを使用してURLパラメータと値を取得するという優れたブログ投稿があります


13
jQueryでは、関数の名前空間をjQueryオブジェクトに指定することを意味しているようです。また、なぜ無効な値なのです0か?確かに、厳密な等価チェックを使用できますが、そうではありませんnullか?
アレックス、

同意した。これは、通常のjavascript変数参照と同じように機能します(ただし、未定義を返す方がより正確であることを除いて)。
アイソクロナス2016

'name'は適切にエスケープされていません。RegExpに直接挿入されています。これは失敗します。他の人が言ったように、これが十分にテストされたライブラリに実装されるべきであるとき、これらの答えが車輪を再発明し、非常に多くの票を得ているとは信じられないでしょう。
Triynko 2016年

167

jQueryを使用している場合は、jQuery BBQ:Back Button&Query Libraryなどのライブラリを使用できます。

... jQuery BBQは、.deparam()ハッシュ状態の管理、およびフラグメント/クエリ文字列の解析とマージユーティリティのメソッドの両方とともに、完全なメソッドを提供します。

編集:Deparamの例の追加:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

単純なJavaScriptだけを使用したい場合は、次のように使用できます...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

新しいHTML History APIと特にhistory.pushState()history.replaceState()より、URLが変更され、パラメーターとその値のキャッシュが無効になる可能性があります。

このバージョンでは、履歴が変更されるたびに、パラメータの内部キャッシュが更新されます。


100

2つのスプリットを使用するだけです。

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

私は以前のすべてのより完全な答えを読んでいました。しかし、私はそれが最も簡単で速い方法だと思います。あなたはこのjsPerf ベンチマークでチェックすることができます

Rupのコメントの問題を解決するには、最初の行を以下の2つに変更して、条件付き分割を追加します。ただし、絶対精度とは、正規表現よりも遅いことを意味します(jsPerfを参照)。

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

したがって、Rupのカウンターケースに遭遇しないことがわかっている場合は、これが優先されます。それ以外の場合、正規表現。

または、クエリ文字列を制御していて、取得しようとしている値にURLエンコードされた文字が含まれないことを保証できる場合(これらの値を値に含めることは悪い考えです)-次のわずかに簡略化された読みやすいバージョンを使用できます。最初のオプションの:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

7
すごくすっきり!ただし、たとえばget('value')onなど、必要なもので終わるキー名を持つ以前の値がある場合は機能しませんhttp://the-url?oldvalue=1&value=2
Rupの

3
ただし、パラメーター名が予期していることがわかっている場合は、これがより高速なアプローチになります。
マーティンBorthiry 2013年

編集:これhalfが真実であるかどうかをテストするだけの場合、空のパラメーターに対してnullを返します?param=。この場合、空の文字列が返されるはずhalf !== undefinedです。チェックすると解決します。
philh 2014年

涼しい!私はワンライナーを作りました:function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
niutech '

それを機能させるには、2行目を変更しなければなりreturn half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;ませんでした
divillysausages

95

以下は、Andy Eの優れたソリューションを本格的なjQueryプラグインにするための私の試みです。

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

構文は次のとおりです。

var someVar = $.getQueryString('myParam');

両方の長所!


76

単にクエリ文字列を解析するだけではなく、より多くのURL操作を行う場合は、URI.jsが役立つことがあります。これは、URLを操作するためのライブラリであり、すべての付属品が付属しています。(ここで自己宣伝して申し訳ありません)

クエリ文字列をマップに変換するには:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.jsは、不正なクエリ文字列も "修正" ?&foo&&bar=baz&します?foo&bar=baz


// src / URI.fragmentURI.jsのロードが必要
JoeB

1
+1 URI.jsは素晴らしい小さなプラグインです。var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');同じ結果を得ることができます(docs)。
Yarin

62

私はRyan Phelanのソリューションが好きです。しかし、そのためにjQueryを拡張する意味はないと思いますか?jQuery機能の使用はありません。

一方、私はGoogle Chromeの組み込み関数window.location.getParameterが好きです。

では、なぜこれを使用しないのですか?さて、他のブラウザにはありません。この関数が存在しない場合は、作成してみましょう。

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

この関数はRyan Phelanとほぼ同じですが、ラップ方法が異なります。明確な名前で、他のJavaScriptライブラリの依存関係はありません。この機能の詳細については、私のブログをご覧ください


3
window.location.getParameter()がChromeから削除されたようです。
mhenry1384 2014

54

PHPの$ _GET配列に似たオブジェクトをすばやく取得する方法を次に示します。

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

使用法:

var $_GET = get_query();

クエリ文字列の場合、x=5&y&z=hello&x=6これはオブジェクトを返します。

{
  x: "6",
  y: undefined,
  z: "hello"
}

あなたはjQueryのプラグインとしてそれを必要とする場合は、ここにある:(function($) { $.extend({ get_query: function (name) { var url = location.href; var qs = url.substring(url.indexOf('?') + 1).split('&'); for(var i = 0, result = {}; i < qs.length; i++){ qs[i] = qs[i].split('='); result[qs[i][0]] = qs[i][1]; } return result; } }); })(jQuery);このような使用:$.get_query()
ティム

ありがとう。これも使ってしまいました。これをあなたのreturnステートメントの前に追加しました:if(param)return result [param]、そのようにして、必要に応じてget_query( 'foo')も実行できます
sqram

1
ハッシュがある場合は機能しません。例:test.aspx?test = t1#default。{test: "t1#default"}が返され、{test: "t1"}が期待されます
Bogdan M.

@BogdanM:確かに。location.hrefに置き換える必要がありますlocation.search
Dan Dascalescu 2015年

53

プレーンなJavaScriptコードでシンプルにしてください:

function qs(key) {
    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[key];
}

JavaScriptコードの任意の場所から呼び出します。

var result = qs('someKey');

1
あなたは私と同じようなことをしていると思いますが、私のアプローチはかなり単純なものだと思いますstackoverflow.com/a/21152762/985454
Qwerty

(ドラムロールお願いします)をご紹介しましょうwindow.location.search
ErikE 2017年

46

これらはすべて素晴らしい答えですが、もう少し堅牢なものが必要でした。皆さんは私が作成したものが欲しいと思っているかもしれません。

これは、URLパラメータの分析と操作を行う単純なライブラリメソッドです。静的メソッドには、サブジェクトURLで呼び出すことができる次のサブメソッドがあります。

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

例:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

44

MDNから:

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

39

コードゴルフ:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

それを表示!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

私のMacの場合:test.htm?i=can&has=cheezburgerディスプレイ

0:can
1:cheezburger
i:can
has:cheezburger

9
私はあなたの答え、特にスクリプトのコンパクトさを気に入っていますが、おそらくdecodeURIComponentを使用する必要があります。参照xkr.us/articles/javascript/encode-comparestackoverflow.com/questions/619323/...
pluckyglen

39

私は正規表現をよく使いますが、そうではありません。

アプリケーションでクエリ文字列を一度読み取り、次のようなすべてのキーと値のペアからオブジェクトを作成する方が簡単で効率的です。

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

のようなURLの場合、http://domain.com?param1=val1&param2=val2それらの値は、後でコードでsearch.param1and として取得できますsearch.param2


38
function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

5
これは興味深いアプローチであり、指定されたパラメーターからの値を含む配列を返します。これには少なくとも1つの問題があります-値を正しくURLデコードしないため、一致で使用されるパラメーター名もURLエンコードする必要があります。ただし、現在の形式の単純なクエリ文字列で機能します。 psは、forステートメントで変数を宣言するときにvarキーワードを使用することを忘れないください。
アンディE

38

Roshambo jQueryメソッドがデコードURLを処理していませんでした

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

returnステートメントを追加する際にも、その機能を追加しました

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

これで、更新された要点を見つけることができます。

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

36

私はこれが好きです(jquery-howto.blogspot.co.ukから取得):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
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;
}

私にとってはうまくいきます。


36

これがこの優れた答えに対する私の編集です-値のないキーを持つクエリ文字列を解析する機能が追加されています。

var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

重要!最後の行のその関数のパラメーターは異なります。これは、任意のURLを渡す方法の単なる例です。ブルーノの回答の最後の行を使用して、現在のURLを解析できます。

では、正確に何が変わったのでしょうか?URLのhttp://sb.com/reg/step1?param=結果は同じになります。しかし、URL http://sb.com/reg/step1?paramを使用すると、ブルーノのソリューションはキーなしのオブジェクトを返しますが、私のものはキーparamundefined値を持つオブジェクトを返します。


34

クエリ文字列のオブジェクトが必要であり、多くのコードが嫌いです。それは宇宙で最も堅牢ではないかもしれませんが、それはほんの数行のコードです。

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

次のようなURL this.htm?hello=world&foo=barが作成されます:

{hello:'world', foo:'bar'}

4
きちんと。ただし、Mozillaによると、forEachはIE7またはIE 8では機能せず、クエリ文字列がまったくない場合はフォールオーバーすると思われます。より多くのケースをカバーする最小の改善点の1つdecodeURIComponentは、値を格納するときの値です。おそらくキーも同様ですが、奇数の文字列を使用する可能性は低くなります。
2013

1
素敵でシンプル。配列パラメーターも処理しません?a&b&cが、これは非常に読みやすいです(ついでに私の最初のアイデアに似ています)。また、split冗長ですが、10文字の文字列を2回分割するよりも大きな性能の魚を揚げることができます。
cod3monk3y 2014

1
querystringが "?hello = world&one = a = b&two = 2"の場合、「one」の値を取得すると、値の最初の「=」の前の部分のみが取得されます。その値は 'a = b'ですが、 '='で 'one = a = b'を分割したため、 'a'のみが得られます。これは単にバギーです。:(((
Shawn Kovac

2
location.search.substr(1)代わりにlocation.href.split('?')[1]を使用#anchorして、最後のクエリパラメータと共にハッシュ()を取得しないようにします。
mlt 2016

はい、紹介しますlocation.search
ErikE 2017年

32

これは、Andy Eのリンクされた「配列スタイルのクエリ文字列を処理する」バージョンの拡張バージョンです。バグを修正(?key=1&key[]=2&key[]=3; 1失われ、に置き換えられます[2,3])、いくつかのマイナーなパフォーマンスの改善(値の再デコード、 "["位置の再計算など)、およびいくつかの改善(機能化?key=1&key=2、のサポート、;区切り文字のサポート)を追加。変数をわずらわしいほど短くしましたが、読みやすくするためにコメントを追加しました(ああ、vローカル関数内で再利用しましたが、混乱を招く場合はごめんなさい;)。

次のクエリ文字列を処理します...

?test = Hello&person = neek&person [] = jeff&person [] = jim&person [extra] = john&test3&nocache = 1398914891264

...それを次のようなオブジェクトにしています...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

あなたは上記を参照できるように、このバージョンのハンドル「不正な」配列、すなわちある程度の- person=neek&person[]=jeff&person[]=jimまたはperson=neek&person=jeff&person=jimキーは、少なくとも過去ログの中に(特定可能かつ有効であるようNameValueCollection.Add):

指定されたキーがターゲットNameValueCollectionインスタンスにすでに存在する場合、指定された値は、「value1、value2、value3」の形式で、値の既存のコンマ区切りリストに追加されます。

仕様がないため、審査員はキーの繰り返しについていくぶん外れているようです。この場合、複数のキーが(偽の)配列として格納されます。しかし、私はしないことに注意してください、コンマに基づく値を配列に処理。

コード:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

クエリ文字列値を取得するには、この「GetParameterValues」関数を使用できます。この場合、クエリ攪拌パラメータ名を渡すだけで、値$(document).ready(function(){var bid = GetParameterValues( 'token');});が返されます。function GetParameterValues(param){var url = decodeURIComponent(window.location.href); url = url.slice(url.indexOf( '?')+ 1).split( '&'); for(var i = 0; i <url.length; i ++){var urlparam = url [i] .split( '='); if(urlparam [0] == param){return urlparam [1]; }}
Mike Clark、

1
私はこれをしばらく使用してきましたが、今のところ素晴らしいです。urlencoded配列の処理を除きます。使用q = decodeURIComponent(window.location.search.substring(1)),することもそれを行うのに役立ちます。
Vladislav Dimitrov 2017

31

これはしばらく前に作成した関数で、とても満足しています。大文字と小文字は区別されません-これは便利です。また、リクエストされたQSが存在しない場合は、空の文字列を返します。

これの圧縮バージョンを使用します。何が起こっているのかをよりよく説明するために、初心者タイプには非圧縮で投稿しています。

これは最適化されるか、より速く動作するように別の方法で実行できると確信していますが、常に私が必要とするものに対してはうまく機能しています。

楽しい。

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

また、unescape()の代わりにdecodeURI()またはdecodeURIComponent()を使用することをお勧めします。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
ADARSH Konchady

27

この問題を一度だけ解決することを目的としたプロジェクトであるarg.jsをリリースしました。これまでは非常に困難でしたが、次のことが可能になりました。

var name = Arg.get("name");

または全体を取得する:

var params = Arg.all();

そして、あなたは違いを気にしている場合?query=true#hash=true、あなたは使用することができますArg.query()し、Arg.hash()方法を。


あなたはarg.jsは、ソリューションの解決なしにはIE 8で#から値を取得されていないさ。.. :(要求からIE8#取得のためのいずれかの検索をこれがソリューションです..私の男を救った
ディリップラジクマール

27

その質問のトップアンサーの問題は、それが#の後に配置されているサポートされていないパラメーターであることですが、この値を取得する必要がある場合もあります。

ハッシュ記号を含む完全なクエリ文字列も解析できるように、回答を変更しました。

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};

1
それが必要な場合は興味深いことですが、AFAIKのハッシュ部分の形式に標準がないため、他の回答の弱点としてそれを呼び出すのは公平ではありません。
2013

2
はい、知っています。しかし、私のアプリでは、ハッシュ記号の後にいくつかのパラメーターがあるサードパーティのjsナビゲーションを統合しています。
Ph0en1x 2013

たとえば、Google検索ページでは、検索クエリの後にハッシュ記号「#」が続きます。
etlds 2014年

25
function GetQueryStringParams(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];
        }
    }
}​

そして、これは、URLが

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

このアプローチの実装はすでにいくつかここにあります。少なくとも、結果の値をdecodeUriComponent()する必要があります。値などを指定しない場合、これは正常に動作しない可能性があります?stringtext&stringword=foo
2013

24

Browserifyを使用している場合はurlNode.jsのモジュールを使用できます。

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

参考資料URL Node.js v0.12.2 Manual&Documentation

編集:URLインターフェイスを使用できます。これは、ほとんどすべての新しいブラウザーで広く採用されており、コードを古いブラウザーで実行する場合は、このようなポリフィルを使用できます。以下は、URLインターフェースを使用してクエリパラメータ(別名検索パラメータ)を取得する方法のコード例です。

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

URLSearchParamsを使用することもできます。URLSearchParamsで実行するためのMDNの例を次に示します。

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

urlモジュールのAPI のドキュメントは次のとおり
api

これはnw.js開発に適しています。ほとんどのノードモジュールはnw.jsウィンドウでそのまま機能するため、Browserifyは必要ありません。私はこのコードをテストしましたが、変更を加えなくても魅力のように動作します。
Andrew Grothe 2015

OHHこれは素晴らしいです!URLSearchParamsは完璧に動作します。どうもありがとう!
Baran Emre

1
おそらく最高の投票になるはずです。カスタム関数や追加のライブラリを使用する手間はありません。また、ほとんどのブラウザ2019で採用されているようだ
TheWhiteLlama
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.