【JS】URLのGET値を取得する

2021年9月11日

PHPが使えない環境などでGET値を取得したいことってありますよね。
そういうときに使える関数です。

function Get_url_GetValue()
{
    var result = {};
    if( 1 < window.location.search.length )
    {
        // 最初の1文字 (?記号) を除いた文字列を取得する
        var query = window.location.search.substring( 1 );
        // クエリの区切り記号 (&) で文字列を配列に分割する
        var parameters = query.split( '&' );
        for( var i = 0; i < parameters.length; i++ )
        {
            // 先頭の=の位置を探す
            var element_idxOf = parameters[ i ].indexOf("=");
            // 先頭から=までの文字を取得
            var paramName = parameters[ i ].substr(0, element_idxOf); 
            // 先頭から=までの文字を取得
            var paramValue = parameters[ i ].substring(element_idxOf + 1, parameters[ i ].length); 
            paramValue = decodeURIComponent(paramValue);

            // パラメータ名をキーとして連想配列に追加する
            result[ paramName ] = paramValue;
        }
    }
    return result;
}

使用例:BASEでのWEBサイト開発

私が必要とした理由は「BASE」でWEBサイトを開発しているときです。あのサービスではPHPが使えないんですよね。またボタンを押した時の動作を変更するのも面倒だったのでGETで受け渡す方法を採用しました。
そのときのリンク元の設定はこんな感じです。

リンク元

SHIOURTで売り切れの商品詳細ページ
{block:NoItemStock}
<!-- 商品がない時は問い合わせ遷移ボタンを表示 -->
<div class="purchaseButton">
    <button type="button" class="purchaseButton__btn" 
        onclick="location.href='{ContactPageURL}?id={ItemId}&title={ItemTitle}&price={ItemPrice}{block:HasItemProperPrice}&proper-price={ItemProperPrice}{/block:HasItemProperPrice}&img={block:ItemImage1}{ItemImage1URL-500}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}'">
        この商品について問い合わせる
    </button>
</div>
{/block:NoItemStock}

buttonタグのhref属性にGETで渡したいものを書き連ねています。設定は以下の通り。

パラメータ名値(BASEのタグを使用)
id{ItemId}
title{ItemTitle}
price{ItemPrice}{block:HasItemProperPrice}&proper-price={ItemProperPrice}{/block:HasItemProperPrice}
img{block:ItemImage1}{ItemImage1URL-500}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}
実際の設定内容

結果

GETで得た内容を問い合わせ画面に表示しています。

SHIOURTで売切商品から問い合わせを選んだ時の問い合わせ画面

下が通常(GETで何も指定しなかった場合)の問い合わせ画面です。

通常の問い合わせ画面

最後に

PHPを使える環境で使ったことはないけど、こういうのも出来るって知ることは大事だと思います。でも今だとjavascriptでサーバサイドもかけるので結構使う人は使うのかな。まあそんなに手間かけずに出来て良かったです。

ほな、また