開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

Javascript でURLのパラメータを取得する方法

最終更新:2018-03-09 by Joe

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が発生する場合は、その振る舞いにに注意してください。

参考リンク

 

閉じる