jQueryでのURLのクエリ文字列(パラメータ)を取得する方法です。
URLの「パラメータ(クエリ文字列)」とは?
URLパラメータ、クエリ文字列とも呼ばれますが、例えば、
「http://www.example.com?lib=jquery&ver=3」
における「?lib=jquery&ver=3」の部分を指します。
Javascript(jQuery)でURLのパラメータ(クエリ文字列)を取得する方法
jQueryと書きましたが、Javascriptに、クエリ文字列を取得する方法がすでに用意されています。location オブジェクトの「.search」プロパティにクエリ文字列(パラメータ)の値が格納されています。
// URLパラメータ文字列を取得する
var param = location.search
alert(param) // 「?lib=jquery&ver=3」が出力
極めてシンプルな変数ですので、jQueryに同じ機能の関数は存在しません。
特定のキーの値だけを取得する方法
javascriptもし特定の値だけを取得したいのであれば、少し工夫が必要です。下記のような関数(Stackoverflowより)が利用できます。
// URL が「http://www.example.com?lib=jquery&ver=3」の場合
alert(getParam('lib')); //「jquery」を出力
alert(getParam('ver')); // 「3」を出力
/**
* Get the URL parameter value
*
* @param name {string} パラメータのキー文字列
* @return url {url} 対象のURL文字列(任意)
*/
function getParam(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, " "));
}
同様の機能をもったjQuery関数は存在しません。上記の関数は、最も万能な関数といえます。
念のため、エッジケースをテストしてみましょう。
// 例:値なしのパラメータ
// http://www.example.com?a=&b=1
getParam('a') // '';
getParam('b') // '1';
getParam('c') // null
// 例:不正なURLパラメータ
// http://www.example.com?a=b=1=c=1
getParam('a') // 'b=1=c=1';
ユニークな「キー=値」とならない不規則なURLが発生する場合は、その振る舞いにに注意してください。
参考リンク