jQueryを介して(またはjQueryなしで)クエリ文字列値を取得するプラグインなしの方法はありますか?
もしそうなら、どのように？そうでない場合、そうできるプラグインはありますか？
4564542 次
73 に答える
9587
更新：2022年1月
使用する方が使用するProxy()よりもパフォーマンスObject.fromEntries()が高く、サポートも優れています
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"
更新：2021年6月
すべてのクエリパラメータが必要な特定のケースの場合：
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
更新：2018年9月
シンプルでまともな（しかし完全ではない）ブラウザサポートを備えたURLSearchParamsを使用できます。
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
オリジナル
そのためにjQueryは必要ありません。純粋なJavaScriptを使用できます。
function getParameterByName(name, 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）を取得します。これに関する標準はなく、使用法も異なります。たとえば、次の質問を参照してください：重複するHTTPGETクエリキーの権限のある位置。
注：関数では大文字と小文字が区別されます。大文字と小文字を区別しないパラメータ名を使用する場合は、RegExpに「i」修飾子を追加します
注：役に立たないエスケープeslintエラーが発生した場合は、に置き換えることができname = name.replace(/[\[\]]/g, '\\$&');ますname = name.replace(/[[\]]/g, '\\$&')。
これは、同じ結果をより簡潔に実現するための新しいURLSearchParams仕様に基づく更新です。以下の「 URLSearchParams 」というタイトルの回答を参照してください。
于 2009-05-23T08:35:46.217 に答える
1764
ここに掲載されているソリューションのいくつかは非効率的です。スクリプトがパラメーターにアクセスする必要があるたびに正規表現検索を繰り返す必要はまったくありません。パラメーターを連想配列スタイルのオブジェクトに分割する単一の関数で十分です。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で定義されていないため、この回答をソースコードで汚染することはありません。「汚染された」バージョンに興味がある人は、以下のcampbelnの回答を見てください。
また、コメントで指摘されているように、ペア;の法的な区切り文字です。またはkey=valueを処理するには、より複雑な正規表現が必要になりますが、使用されることはまれであり、両方が使用される可能性はさらに低いため、不要だと思います。の代わりにサポートする必要がある場合は、正規表現でそれらを交換するだけです。;&;;&
サーバー側の前処理言語を使用している場合は、ネイティブの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]);
}
}
})();
于 2010-05-21T09:29:16.547 に答える
1312
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のコードを引き裂いて、彼らが使用する方法を見つけました：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¶m2=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% 遅い
于 2010-10-04T12:53:04.823 に答える
676
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/を参照してください。
于 2011-03-01T17:49:02.010 に答える
664
URLSearchParams
Firefox 44 以降、Opera 36 以降、Edge 17 以降、Safari 10.3 以降、Chrome 49 以降は、URLSearchParams APIをサポートしています。
IE の安定版には、Google が推奨する URLSearchParams ポリフィルがあります。
W3Cでは標準化されていませんが、 WhatWGによって標準化されています。
あなたはそれを使用することができますlocation:
const params = new URLSearchParams(location.search);
また
const params = (new URL(location)).searchParams;
またはもちろん、任意の URL で:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
.searchParams次のように、URL オブジェクトの省略形プロパティを使用して params を取得することもできます。
const 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) {}。
于 2012-08-28T00:27:41.967 に答える
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'
于 2011-03-15T15:21:00.817 に答える
252
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 Destructuring 割り当て、矢印関数、テンプレート文字列
"?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(...)
于 2014-01-16T03:20:35.013 に答える
222
snipplr.com の Roshambo には、これを実現するための簡単なスクリプトがあります。改善されました。彼のスクリプトを使用すると、必要なパラメーターだけを簡単に引き出すこともできます。
要点は次のとおりです。
$.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 には、これに関する素晴らしいブログ投稿もあります。 Get URL parameters & values with jQuery .
于 2010-03-19T19:52:08.840 に答える
168
jQueryを使用している場合は、jQuery BBQ：Back Button＆QueryLibraryなどのライブラリを使用できます。
... 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;
}
})();
新しいHTMLHistoryAPI、特にhistory.pushState()とhistory.replaceState()のために、URLが変更される可能性があり、パラメーターとその値のキャッシュが無効になります。
このバージョンでは、履歴が変更されるたびにパラメータの内部キャッシュが更新されます。
于 2009-05-23T08:14:40.957 に答える
102
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;
于 2012-09-03T21:08:41.647 に答える
97
以下は、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');
両方の長所！
于 2010-10-05T20:49:37.310 に答える
77
単にクエリ文字列を解析するよりも多くの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ます）
于 2012-02-20T14:18:01.967 に答える
65
私は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 ライブラリとの依存関係はありません。この機能の詳細については、私のブログ を参照してください。
于 2012-01-10T23:36:08.110 に答える
58
プレーンな 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');
于 2012-02-20T14:00:00.887 に答える
57
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"
}
于 2012-08-30T13:00:15.113 に答える
46
これらはすべて素晴らしい答えですが、もう少し堅牢なものが必要でした。皆さんも私が作成したものを気に入っていただけると思いました。
これは、URL パラメータの分析と操作を行う単純なライブラリ メソッドです。静的メソッドには、サブジェクト URL で呼び出すことができる次のサブメソッドがあります。
- getHost
- getPath
- getHash
- セットハッシュ
- 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>');
于 2012-09-13T00:34:28.080 に答える
46
MDNから:
function loadPageVar (sVar) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
于 2013-02-11T10:31:21.567 に答える
41
コードゴルフ：
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
于 2010-11-16T12:49:46.823 に答える
41
私は正規表現をよく使いますが、そのためではありません。
アプリケーションでクエリ文字列を一度読み取り、次のようなすべてのキーと値のペアからオブジェクトを構築する方が簡単で効率的です。
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¶m2=val2として値を取得できます。search.param1search.param2
于 2011-03-14T10:13:40.390 に答える
39
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
于 2010-07-10T20:48:12.670 に答える
39
Roshambo jQuery メソッドはデコード URL を処理していませんでした
http://snipplr.com/view/26662/get-url-parameters-with-jquery--改善/
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;
}
于 2010-12-14T12:20:00.277 に答える
37
私はこれが好きです（ 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;
}
私にとっては素晴らしい作品です。
于 2012-07-26T20:29:05.807 に答える
37
これがこの優れた回答に対する私の編集です-値のないキーでクエリ文字列を解析する機能が追加されています。
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 を解析できます。
では、具体的に何が変わったのでしょうか？URLhttp://sb.com/reg/step1?param=の結果は同じになります。しかし、urlhttp://sb.com/reg/step1?paramブルーノのソリューションはキーなしのオブジェクトを返しますが、私のソリューションはキーparamとundefined値を持つオブジェクトを返します。
于 2011-08-18T10:45:21.330 に答える
34
クエリ文字列からオブジェクトを取得する必要がありましたが、大量のコードは嫌いです。宇宙で最も堅牢ではないかもしれませんが、ほんの数行のコードです。
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
次のような URLthis.htm?hello=world&foo=barを作成します。
{hello:'world', foo:'bar'}
于 2013-02-14T21:20:49.747 に答える
34
これは、Andy E のリンクされた「Handle array-style query strings」バージョンの拡張バージョンです。バグを修正し ( ?key=1&key[]=2&key[]=3;1が失われて に置き換えられました[2,3])、いくつかのマイナーなパフォーマンスの改善 (値の再デコード、"[" 位置の再計算など) を行い、いくつかの改善を追加しました (機能化、 のサポート?key=1&key=2、;区切り文字のサポート) 。 . 私は変数をいらいらさせるほど短く残しましたが、読みやすくするためにたくさんのコメントを追加しました (ああ、vローカル関数内で再利用しました。混乱していたらごめんなさい;)。
次のクエリ文字列を処理します...
?test=こんにちは&person=neek&person[]=ジェフ&person[]=ジム&person[extra]=ジョン&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キーが識別可能で有効であるため (少なくとも dotNet の NameValueCollection.Add で) :
指定されたキーがターゲットの NameValueCollection インスタンスに既に存在する場合、指定された値は、「値 1,値 2,値 3」の形式で、既存のコンマ区切りの値のリストに追加されます。
仕様がないため、繰り返しのキーについては陪審員が多少外れているようです。この場合、複数のキーが (偽の) 配列として格納されます。ただし、コンマに基づく値を配列に処理しないことに注意してください。
コード：
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;
};
于 2014-05-01T03:51:40.210 に答える
32
これは私がしばらく前に作成した関数で、非常に満足しています。大文字と小文字が区別されないため、便利です。また、要求された 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);
}
于 2011-01-28T15:43:24.523 に答える
28
Browserify を使用している場合は、 Node.jsurlのモジュールを使用できます。
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
さらに読む: URL Node.js v0.12.2 マニュアルとドキュメント
編集: 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"
于 2013-05-14T12:47:10.743 に答える
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;
};
于 2013-04-13T14:37:07.127 に答える
27
この問題を完全に解決することを目的としたプロジェクトarg.jsをリリースしました。従来は非常に困難でしたが、今では次のことができます。
var name = Arg.get("name");
またはすべてを取得する：
var params = Arg.all();
?query=trueとの違いが気になる場合は、とメソッド#hash=trueを使用できます。Arg.query()Arg.hash()
于 2013-09-30T17:37:08.840 に答える
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');
于 2013-02-06T09:09:42.137 に答える
23
これはうまくいきます。他のいくつかの回答の正規表現は、不要なオーバーヘッドをもたらします。
function getQuerystring(key) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == key) {
return pair[1];
}
}
}
ここから撮影
于 2012-05-24T08:18:40.867 に答える
21
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
- 通常のキーと値のペア (
?param=value) - 値のないキー (
?param: 等号または値なし) - 空の値を持つキー (
?param=: 等号、ただし等号の右側に値がない) - 繰り返しキー (
?param=1¶m=2) - 空のキーを削除します (
?&&: キーまたは値なし)
コード：
var queryString = window.location.search || ''; var keyValPairs = []; var params = {}; queryString = queryString.substr(1); if (queryString.length) { keyValPairs = queryString.split('&'); for (pairNum in keyValPairs) { var key = keyValPairs[pairNum].split('=')[0]; if (!key.length) continue; if (typeof params[key] === 'undefined') params[key] = []; params[key].push(keyValPairs[pairNum].split('=')[1]); } }
電話する方法:
params['key']; // returns an array of values (1..n)
出力：
key ["value"] keyemptyvalue [""] keynovalue [undefined, "nowhasvalue"]
于 2012-04-06T21:14:18.440 に答える
20
ここにリストされている手法を使用して小さなライブラリを開発し、誰もが抱える問題に対する使いやすいドロップインソリューションを作成しました。それはここで見つけることができます：
https://github.com/Nijikokun/query-js
使用法
特定のパラメータ/キーの取得：
query.get('param');
ビルダーを使用してオブジェクト全体をフェッチします。
var storage = query.build();
console.log(storage.param);
その他の例については、githubリンクを確認してください。
特徴
- デコードとパラメータの両方のキャッシュ
- ハッシュクエリ文字列をサポートします
#hello?page=3 - カスタムクエリの受け渡しをサポート
- 配列/オブジェクトパラメータをサポート
user[]="jim"&user[]="bob" - 空の管理をサポート
&& - 値のない宣言パラメーターをサポートします
name&hello="world" - 繰り返されるパラメータをサポートします
param=1¶m=2 - クリーンでコンパクト、そして読みやすいソース
4kb - AMD、Require、Nodeのサポート
于 2013-01-25T20:35:40.543 に答える
20
クエリを取得するためのワンライナー:
var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
于 2012-11-15T18:15:13.280 に答える
18
GitHub のクエリ文字列解析コードの私のバージョンは次のとおりです。
jquery.* で「プレフィックス」されていますが、解析関数自体は jQuery を使用しません。これは非常に高速ですが、いくつかの簡単なパフォーマンスの最適化を行う余地があります。
また、次のような URL でのリストとハッシュ テーブルのエンコーディングもサポートしています。
arr[]=10&arr[]=20&arr[]=100
また
hash[key1]=hello&hash[key2]=moto&a=How%20are%20you
jQuery.toQueryParams = function(str, separator) {
separator = separator || '&'
var obj = {}
if (str.length == 0)
return obj
var c = str.substr(0,1)
var s = c=='?' || c=='#' ? str.substr(1) : str;
var a = s.split(separator)
for (var i=0; i<a.length; i++) {
var p = a[i].indexOf('=')
if (p < 0) {
obj[a[i]] = ''
continue
}
var k = decodeURIComponent(a[i].substr(0,p)),
v = decodeURIComponent(a[i].substr(p+1))
var bps = k.indexOf('[')
if (bps < 0) {
obj[k] = v
continue;
}
var bpe = k.substr(bps+1).indexOf(']')
if (bpe < 0) {
obj[k] = v
continue;
}
var bpv = k.substr(bps+1, bps+bpe-1)
var k = k.substr(0,bps)
if (bpv.length <= 0) {
if (typeof(obj[k]) != 'object') obj[k] = []
obj[k].push(v)
} else {
if (typeof(obj[k]) != 'object') obj[k] = {}
obj[k][bpv] = v
}
}
return obj;
}
于 2010-11-16T09:55:08.010 に答える
18
非常に軽量な jQuery メソッド:
var qs = window.location.search.replace('?','').split('&'),
request = {};
$.each(qs, function(i,v) {
var initial, pair = v.split('=');
if(initial = request[pair[0]]){
if(!$.isArray(initial)) {
request[pair[0]] = [initial]
}
request[pair[0]].push(pair[1]);
} else {
request[pair[0]] = pair[1];
}
return;
});
console.log(request);
アラートを出すには、たとえば ?q
alert(request.q)
于 2013-03-29T00:59:07.147 に答える
17
split()この操作には、正規表現の代わりに使用したいと思います。
function getUrlParams() {
var result = {};
var params = (window.location.search.split('?')[1] || '').split('&');
for(var param in params) {
if (params.hasOwnProperty(param)) {
var paramParts = params[param].split('=');
result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
}
}
return result;
}
于 2011-05-03T23:59:19.087 に答える
13
これが私が使用しているものです：
/**
* Examples:
* getUrlParams()['myparam'] // url defaults to the current page
* getUrlParams(url)['myparam'] // url can be just a query string
*
* Results of calling `getUrlParams(url)['myparam']` with various urls:
* example.com (undefined)
* example.com? (undefined)
* example.com?myparam (empty string)
* example.com?myparam= (empty string)
* example.com?myparam=0 (the string '0')
* example.com?myparam=0&myparam=override (the string 'override')
*
* Origin: http://stackoverflow.com/a/23946023/2407309
*/
function getUrlParams (url) {
var urlParams = {} // return value
var queryString = getQueryString()
if (queryString) {
var keyValuePairs = queryString.split('&')
for (var i = 0; i < keyValuePairs.length; i++) {
var keyValuePair = keyValuePairs[i].split('=')
var paramName = keyValuePair[0]
var paramValue = keyValuePair[1] || ''
urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
}
}
return urlParams // functions below
function getQueryString () {
var reducedUrl = url || window.location.search
reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
var queryString = reducedUrl.split('?')[1]
if (!queryString) {
if (reducedUrl.search('=') !== false) { // URL is a query string.
queryString = reducedUrl
}
}
return queryString
} // getQueryString
} // getUrlParams
最後のケースで '0' ではなく 'override' を返すと、PHP との一貫性が保たれます。IE7 で動作します。
于 2014-05-30T02:17:09.607 に答える
10
短い方法（制限付き）が必要な場合：
location.search.split('myParameter=')[1]
于 2014-04-14T07:18:53.967 に答える
10
チェックボックスの値 (配列) を含むすべてのクエリ文字列パラメーターを取得します。
GET パラメータの正しい & 通常の使用を考慮すると、ほとんどの関数で欠落していると思われるのは、配列のサポートとハッシュ データの削除です。
だから私はこの関数を書きました：
function qs(a){
if(!a)return {};
a=a.split('#')[0].split('&');
var b=a.length,c={},d,k,v;
while(b--){
d=a[b].split('=');
k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
}
return c
}
簡略演算子 & while_--loop を使用すると、パフォーマンスが非常に向上するはずです。
サポート：
- 空の値 ( key= / key )
- キー値 ( key=value )
- 配列 (キー[]=値)
- ハッシュ（ハッシュタグが分割されている）
ノート：
オブジェクト配列をサポートしていません (キー[キー]=値)
スペースが + の場合、+ のままです。
必要に応じて追加.replace(/\+/g, " ")します。
使用法：
qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')
戻る：
{
"empty": "",
"key": "value",
"array": [
"1",
"2"
]
}
デモ：
情報
何かわからないことや機能が読めない場合は、質問してください。ここで何をしたかを喜んで説明します。
関数が判読不能で保守できないと思われる場合は、喜んで関数を書き直しますが、省略形とビット単位の演算子は常に標準の構文よりも高速であることを考慮してください (ECMA-262 の本の短縮形とビット単位の演算子について読むか、お気に入りの検索エンジン)。標準の読み取り可能な構文でコードを書き直すことは、パフォーマンスの低下を意味します。
于 2014-01-25T12:54:09.527 に答える
9
function getUrlVar(key){
var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
return result && unescape(result[1]) || "";
}
于 2012-02-08T18:53:18.353 に答える
8
これを試して：
String.prototype.getValueByKey = function(k){
var p = new RegExp('\\b'+k+'\\b','gi');
return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};
次に、そのように呼び出します。
if(location.search != "") location.search.getValueByKey("id");
これはCookieにも使用できます。
if(navigator.cookieEnabled) document.cookie.getValueByKey("username");
これは、key=value[&|;|$]...を持つ文字列に対してのみ機能し、オブジェクト/配列では機能しません。
String.prototypeを使用したくない場合は、それを関数に移動し、文字列を引数として渡します
于 2012-01-05T00:26:07.657 に答える
8
次のコードは、2 つのメソッドを持つオブジェクトを作成します。
isKeyExist処置: 特定のパラメータが存在するかどうかを確認してくださいgetValue: 特定のパラメータの値を取得します。
var QSParam = new function() {
var qsParm = {};
var query = window.location.search.substring(1);
var params = query.split('&');
for (var i = 0; i < params.length; i++) {
var pos = params[i].indexOf('=');
if (pos > 0) {
var key = params[i].substring(0, pos);
var val = params[i].substring(pos + 1);
qsParm[key] = val;
}
}
this.isKeyExist = function(query){
if(qsParm[query]){
return true;
}
else{
return false;
}
};
this.getValue = function(query){
if(qsParm[query])
{
return qsParm[query];
}
throw "URL does not contain query "+ query;
}
};
于 2011-10-16T18:38:02.993 に答える
7
これが私自身の見解です。この最初の関数は、URL 文字列を名前と値のペアのオブジェクトにデコードします。
url_args_decode = function (url) {
var args_enc, el, i, nameval, ret;
ret = {};
// use the DOM to parse the URL via an 'a' element
el = document.createElement("a");
el.href = url;
// strip off initial ? on search and split
args_enc = el.search.substring(1).split('&');
for (i = 0; i < args_enc.length; i++) {
// convert + into space, split on =, and then decode
args_enc[i].replace(/\+/g, ' ');
nameval = args_enc[i].split('=', 2);
ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
}
return ret;
};
さらに、引数の一部を変更した場合は、この 2 番目の関数を使用して、引数の配列を URL 文字列に戻すことができます。
url_args_replace = function (url, args) {
var args_enc, el, name;
// use the DOM to parse the URL via an 'a' element
el = document.createElement("a");
el.href = url;
args_enc = [];
// encode args to go into url
for (name in args) {
if (args.hasOwnProperty(name)) {
name = encodeURIComponent(name);
args[name] = encodeURIComponent(args[name]);
args_enc.push(name + '=' + args[name]);
}
}
if (args_enc.length > 0) {
el.search = '?' + args_enc.join('&');
} else {
el.search = '';
}
return el.href;
};
于 2012-02-22T20:40:59.497 に答える
6
次の関数は、queryString のオブジェクト バージョンを返します。andの値にアクセスするためにobj.key1、 and を書くだけでパラメータにアクセスできます。obj.key2key1key2
function getQueryStringObject()
{
var querystring = document.location.search.replace('?','').split( '&' );
var objQueryString={};
var key="",val="";
if(typeof querystring == 'undefined')
{
return (typeof querystring);
}
for(i=0;i<querystring.length;i++)
{
key=querystring[i].split("=")[0];
val=querystring[i].split("=")[1];
objQueryString[key] = val;
}
return objQueryString;
}
そして、この関数を使用するには、次のように書くことができます
var obj= getQueryStringObject();
alert(obj.key1);
于 2012-07-02T09:09:53.363 に答える
6
この関数は、クエリ文字列を JSON のようなオブジェクトに変換し、値のないパラメーターと複数値のパラメーターも処理します。
"use strict";
function getQuerystringData(name) {
var data = { };
var parameters = window.location.search.substring(1).split("&");
for (var i = 0, j = parameters.length; i < j; i++) {
var parameter = parameters[i].split("=");
var parameterName = decodeURIComponent(parameter[0]);
var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
var dataType = typeof data[parameterName];
if (dataType === "undefined") {
data[parameterName] = parameterValue;
} else if (dataType === "array") {
data[parameterName].push(parameterValue);
} else {
data[parameterName] = [data[parameterName]];
data[parameterName].push(parameterValue);
}
}
return typeof name === "string" ? data[name] : data;
}
変数が の場合は文字列 "undefined" が返されるため、 undefinedonのチェックを実行しますが、これは誤りです。parameter[1]decodeURIComponentundefined
使用法：
"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
于 2012-10-26T08:29:56.070 に答える
5
私はこの答えを受け取り、オプションでURLをパラメーターとして渡すためのサポートを追加しました。window.location.searchにフォールバックします。明らかに、これは現在のページではないURLからクエリ文字列パラメータを取得するのに役立ちます。
(function($, undef) {
$.QueryString = function(url) {
var pairs, qs = null, index, map = {};
if(url == undef){
qs = window.location.search.substr(1);
}else{
index = url.indexOf('?');
if(index == -1) return {};
qs = url.substring(index+1);
}
pairs = qs.split('&');
if (pairs == "") return {};
for (var i = 0; i < pairs.length; ++i)
{
var p = pairs[i].split('=');
if(p.length != 2) continue;
map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return map;
};
})(jQuery);
于 2011-05-24T06:32:43.170 に答える
5
Underscore.jsまたはlodashをお持ちの場合、これを行うための簡単で汚い方法は次のとおりです。
_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
于 2013-11-20T15:17:59.307 に答える
4
urlいくつかのクールな砂糖漬けでこれのための素敵な小さなユーティリティがあります：
http://www.example.com/path/index.html?silly=willy#chucky=cheese
url(); // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain'); // example.com
url('1'); // path
url('-1'); // index.html
url('?'); // silly=willy
url('?silly'); // willy
url('?poo'); // (an empty string)
url('#'); // chucky=cheese
url('#chucky'); // cheese
url('#poo'); // (an empty string)
その他の例を確認し、ここからダウンロードしてください：https ://github.com/websanova/js-url#url
于 2012-10-31T20:31:45.507 に答える
4
これは、URLからintansStringパラメーター値を取得するための最も単純で小さな関数JavaScriptです。
/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */
function getParameterint(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n=parseInt(url.replace(param+"=",""));
alert(n);
}
getParameteraint("page");
getParameteraint("pagee");
/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n=url.replace(param+"=","");
alert(n);
}
getParameterstr("str");
ソースとデモ： http： //bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html
于 2013-01-25T05:29:54.433 に答える
4
URI クエリ値を取得するための解決策はたくさんありますが、短くてうまく機能するので、私はこれを好みます。
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
于 2013-09-07T09:32:51.557 に答える
4
プレーンな JavaScript と正規表現を使用したシンプルなソリューション:
alert(getQueryString("p2"));
function getQueryString (Param) {
return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}
于 2014-01-30T08:34:11.837 に答える
4
これは、これを達成するための正確かつ簡潔な方法であると信じています ( http://css-tricks.com/snippets/javascript/get-url-variables/から変更):
function getQueryVariable(variable) {
var query = window.location.search.substring(1), // Remove the ? from the query string.
vars = query.split("&"); // Split all values by ampersand.
for (var i = 0; i < vars.length; i++) { // Loop through them...
var pair = vars[i].split("="); // Split the name from the value.
if (pair[0] == variable) { // Once the requested value is found...
return ( pair[1] == undefined ) ? null : pair[1]; // Return null if there is no value (no equals sign), otherwise return the value.
}
}
return undefined; // Wasn't found.
}
于 2013-03-17T04:24:25.213 に答える
4
Node.js のソースに堅牢な実装があり
ます https://github.com/joyent/node/blob/master/lib/querystring.js
また、TJ の qs は、ネストされたパラメーターの解析を行い
ます https://github.com/visionmedia/node-querystring
于 2013-07-28T10:42:07.813 に答える
4
var getUrlParameters = function (name, url) {
if (!name) {
return undefined;
}
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
url = url || location.search;
var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];
while (result = regex.exec(url)) {
resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
}
return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
于 2013-08-12T20:15:51.307 に答える
4
JavaScript ライブラリを使用したくない場合は、JavaScript 文字列関数を使用してwindow.location. このコードを外部の .js ファイルに保存しておけば、さまざまなプロジェクトで繰り返し使用できます。
// Example - window.location = "index.htm?name=bob";
var value = getParameterValue("name");
alert("name = " + value);
function getParameterValue(param)
{
var url = window.location;
var parts = url.split('?');
var params = parts[1].split('&');
var val = "";
for ( var i=0; i<params.length; i++)
{
var paramNameVal = params[i].split('=');
if ( paramNameVal[0] == param )
{
val = paramNameVal[1];
}
}
return val;
}
于 2013-05-17T02:14:15.517 に答える
3
最もきれいだが基本的なもの：
data = {};
$.each(
location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
return kvpairs.split('=')
}),
function(i,values) {
data[values.shift()] = values.join('=')
}
);
次のような値リストは処理しません?a[]=1&a[]2
于 2014-06-06T10:32:43.477 に答える
2
クエリオブジェクトを取得するためのサイズの観点から可能な最短の式は次のようです。
var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });
要素を使用してA、文字列から URI を解析して、そのようなコンポーネントに変換できます (たとえば、 をlocation取り除くため)。#...
var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
于 2014-02-14T21:14:06.730 に答える
2
これを確実に行うことは、最初に考えるよりも複雑です。
location.search他の回答で使用されている は脆弱であり、避ける必要があります。たとえば、誰かが失敗して文字列#fragmentの前に識別子を置くと、空が返され?queryます。decodeURIComponent私の意見では、ブラウザで URL を自動的にエスケープする方法はいくつかあります。- 多くのクエリ文字列はユーザー入力から生成されます。これは、URL コンテンツに関する仮定が非常に不適切であることを意味します。各キーが一意である、または値を持っているなど、非常に基本的なことも含まれます。
これを解決するために、適切な量の防御的プログラミングを備えた構成可能な API があります。一部の変数をハードコーディングする場合、または入力hasOwnPropertyに などを含めることができない場合は、半分のサイズにすることができることに注意してください。
バージョン 1:各パラメーターの名前と値を含むデータ オブジェクトを返します。それらを効果的に重複排除し、左から右に最初に見つかったものを常に尊重します。
function getQueryData(url, paramKey, pairKey, missingValue, decode) {
var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;
if (!url || typeof url !== 'string') {
url = location.href; // more robust than location.search, which is flaky
}
if (!paramKey || typeof paramKey !== 'string') {
paramKey = '&';
}
if (!pairKey || typeof pairKey !== 'string') {
pairKey = '=';
}
// when you do not explicitly tell the API...
if (arguments.length < 5) {
// it will unescape parameter keys and values by default...
decode = true;
}
queryStart = url.indexOf('?');
if (queryStart >= 0) {
// grab everything after the very first ? question mark...
query = url.substring(queryStart + 1);
} else {
// assume the input is already parameter data...
query = url;
}
// remove fragment identifiers...
fragStart = query.indexOf('#');
if (fragStart >= 0) {
// remove everything after the first # hash mark...
query = query.substring(0, fragStart);
}
// make sure at this point we have enough material to do something useful...
if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
// we no longer need the whole query, so get the parameters...
query = query.split(paramKey);
result = {};
// loop through the parameters...
for (i = 0, len = query.length; i < len; i = i + 1) {
pairKeyStart = query[i].indexOf(pairKey);
if (pairKeyStart >= 0) {
name = query[i].substring(0, pairKeyStart);
} else {
name = query[i];
}
// only continue for non-empty names that we have not seen before...
if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
if (decode) {
// unescape characters with special meaning like ? and #
name = decodeURIComponent(name);
}
if (pairKeyStart >= 0) {
value = query[i].substring(pairKeyStart + 1);
if (value) {
if (decode) {
value = decodeURIComponent(value);
}
} else {
value = missingValue;
}
} else {
value = missingValue;
}
result[name] = value;
}
}
return result;
}
}
バージョン 2: 2 つの同じ長さの配列 (1 つは名前用、もう 1 つは値用) を持つデータ マップ オブジェクトを、各パラメーターのインデックスと共に返します。これは重複した名前をサポートし、意図的に重複を排除しません。これが、おそらくこの形式を使用したい理由だからです。
function getQueryData(url, paramKey, pairKey, missingValue, decode) {
var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;
if (!url || typeof url !== 'string') {
url = location.href; // more robust than location.search, which is flaky
}
if (!paramKey || typeof paramKey !== 'string') {
paramKey = '&';
}
if (!pairKey || typeof pairKey !== 'string') {
pairKey = '=';
}
// when you do not explicitly tell the API...
if (arguments.length < 5) {
// it will unescape parameter keys and values by default...
decode = true;
}
queryStart = url.indexOf('?');
if (queryStart >= 0) {
// grab everything after the very first ? question mark...
query = url.substring(queryStart + 1);
} else {
// assume the input is already parameter data...
query = url;
}
// remove fragment identifiers...
fragStart = query.indexOf('#');
if (fragStart >= 0) {
// remove everything after the first # hash mark...
query = query.substring(0, fragStart);
}
// make sure at this point we have enough material to do something useful...
if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
// we no longer need the whole query, so get the parameters...
query = query.split(paramKey);
result = {
names: [],
values: []
};
// loop through the parameters...
for (i = 0, len = query.length; i < len; i = i + 1) {
pairKeyStart = query[i].indexOf(pairKey);
if (pairKeyStart >= 0) {
name = query[i].substring(0, pairKeyStart);
} else {
name = query[i];
}
// only continue for non-empty names...
if (name) {
if (decode) {
// unescape characters with special meaning like ? and #
name = decodeURIComponent(name);
}
if (pairKeyStart >= 0) {
value = query[i].substring(pairKeyStart + 1);
if (value) {
if (decode) {
value = decodeURIComponent(value);
}
} else {
value = missingValue;
}
} else {
value = missingValue;
}
result.names.push(name);
result.values.push(value);
}
}
return result;
}
}
于 2014-01-17T08:20:59.710 に答える
2
これは私にとってはうまくいきませんでした。パラメーターが存在するので一致?bさせたいのですが、パラメーターとして一致させたくないのです。ここに私の解決策があります。b?returnr
window.query_param = function(name) {
var param_value, params;
params = location.search.replace(/^\?/, '');
params = _.map(params.split('&'), function(s) {
return s.split('=');
});
param_value = _.select(params, function(s) {
return s.first === name;
})[0];
if (param_value) {
return decodeURIComponent(param_value[1] || '');
} else {
return null;
}
};
于 2014-02-12T18:19:29.850 に答える
1
これは機能します...名前を渡してパラメーターを取得する必要がある場所で、この関数を呼び出す必要があります...
function getParameterByName(name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
alert(results[1]);
if (results == null)
return "";
else
return results[1];
}
于 2014-01-22T07:58:16.637 に答える
1
この関数は、必要に応じて再帰を使用して、任意にネストされた値を持つ解析済み JavaScript オブジェクトを返します。
jsfiddleの例を次に示します。
[
'?a=a',
'&b=a',
'&b=b',
'&c[]=a',
'&c[]=b',
'&d[a]=a',
'&d[a]=x',
'&e[a][]=a',
'&e[a][]=b',
'&f[a][b]=a',
'&f[a][b]=x',
'&g[a][b][]=a',
'&g[a][b][]=b',
'&h=%2B+%25',
'&i[aa=b',
'&i[]=b',
'&j=',
'&k',
'&=l',
'&abc=foo',
'&def=%5Basf%5D',
'&ghi=[j%3Dkl]',
'&xy%3Dz=5',
'&foo=b%3Dar',
'&xy%5Bz=5'
].join('');
上記のテスト例のいずれかが与えられます。
var qs = function(a) {
var b, c, e;
b = {};
c = function(d) {
return d && decodeURIComponent(d.replace(/\+/g, " "));
};
e = function(f, g, h) {
var i, j, k, l;
h = h ? h : null;
i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
if (i) {
[j, k, l] = [i[1], i[2], i[3]]
if (k === void 0) {
if (f[j] === void 0) {
f[j] = [];
}
f[j].push(h);
} else {
if (typeof f[j] !== "object") {
f[j] = {};
}
if (l) {
e(f[j], k + l, h);
} else {
e(f[j], k, h);
}
}
} else {
if (f.hasOwnProperty(g)) {
if (Array.isArray(f[g])) {
f[g].push(h);
} else {
f[g] = [].concat.apply([f[g]], [h]);
}
} else {
f[g] = h;
}
return f[g];
}
};
a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
n && e(b, c(n), c(o));
});
return b;
};
于 2014-06-30T12:05:10.257 に答える
0
// Parse query string
var params = {}, queryString = location.hash.substring(1),
regex = /([^&=]+)=([^&]*)/g,
m;
while (m = regex.exec(queryString)) {
params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
于 2014-06-27T21:22:38.590 に答える