JavaScript でURLパラメータの取得

URLパラメータ

ホームページを開く際に url の後、?param= がついて引数を渡す事ができます。これをJavaScriptでどう処理できるのか、初歩的なところでいつもつまずくので覚書です。

getParamで取得可能にする

例 URL

https://techlive.tokyo/test.html?param01=test

の場合、変数への格納は以下の通りです

getParam(‘param01’)

これで、getParam(‘param01’)にて、testという文字列を取得する事ができます。

getParam 関数の中身は

url = window.location.href

にて、URLを取得する事が肝になっています。

コードはJavascriptの中で

javascriptを動かしているので、javascriptの宣言が必要です。

test.htmlの中身です。

<html>
<head>
<title>URLパラメータ取得サンプル</title>

</head>
<body>

<script language="javascript" type="text/javascript">

alert(getParam('param01')); 

/**
 * 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, " "));
}

</script>
<p>Get Parm Test Page</p>
</body>
</html>