jQueryを使って(あるいは使わずに)、プラグインなしでクエリ文字列の値を取得する方法はありますか?
あるとすれば、どのようにして?ない場合は、それを可能にするプラグインはありますか?
更新日:9月-2018年。
URLSearchParams]1はシンプルで、まともな(完全ではない)ブラウザサポートを備えています。
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
)を取得します。これについての標準はなく、使用方法も様々です。例えば、この質問をご覧ください。Authoritative position of duplicate HTTP GET query keysを参照してください。
注意: この関数は、大文字と小文字を区別します。大文字小文字を区別しないパラメータ名を希望する場合は、RegExpに'i'修飾子を追加してください。
これは新しいURLSearchParams specsに基づいたアップデートで、同じ結果をより簡潔に実現するためのものです。後述の「URLSearchParams」というタイトルの回答を参照してください。
snipplr.comのRoshambo氏は、Get URL Parameters with jQuery | Improvedで紹介されているように、これを実現するシンプルなスクリプトを持っています。このスクリプトでは、必要なパラメータだけを簡単に取り出すことができます。
以下にその概要を紹介する。
$.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');`を呼べばOKです。
UZBEKJONさんのブログでも、Get URL parameters & values with jQueryという素晴らしい記事が紹介されています。
jQueryを使用している場合は、jQuery BBQ: Back Button & Query Libraryのようなライブラリを使用することができます。
...jQuery BBQは、完全な
.depasam()
メソッドを提供するとともに、ハッシュの状態管理、フラグメント/クエリ文字列のパースとマージのユーティリティーメソッドを提供します。
編集: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 が変更され、パラメータとその値のキャッシュが無効になることがあります。
このバージョンでは、履歴が変更されるたびに、パラメータの内部キャッシュが更新されます。