KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

JavaScriptでGET形式のURLパラメーターを取得する方法

2018/05/11
Category :
  1. JavaScript
Tags :
  1. 自作

JavaScriptでGET形式のパラメータを取得する作業が何回か必要になったので
今後も使い回せるように関数化して忘れないようにまとめておく。

https://keprate.com/contact/shop/?plan=m&price=2

例えば上記のようなURLがありGET形式のパラメータがあるのでplanとpriceの値を取得したい。
(この場合はplanはm、priceは2である。)

まずはメインクラスのKepParamAnalysisClass。
(ParamAnalysisClassでも問題ないと思いますが念のため名前が被らないように接頭語としてKepを付加。)

function KepParamAnalysisClass() {

    var t = this;

    t.param = location.search.substring(1);
    t.paramFlag = false;
    t.paramObj = {};
    t.paramArrLen;

    if (t.param) t.paramFlag = true;

    if (t.paramFlag) {
        t.paramArr = t.param.split('&');
        t.paramArrLen = t.paramArr.length;
        var i = 0;
        for (i = 0; i < t.paramArrLen; i++) {
            var param = t.paramArr[i].split('=');
            var vars = param[0];
            var val = param[1];
            t.paramObj[vars] = val;//キーで取り出せるように連想配列で格納
        }
    }

    t.getIsParam = function() {
        return t.paramFlag;
    }

    t.getParamVal = function(val) {
        return t.paramObj[val];
    }

}

ポイント

  1. 1行目:
    何回もURLを解析したくないので最初の一回だけURL解析
    var kpa = new KepParamAnalysisClass;
  2. 5行目:
    location.href.split('?')[1]でもパラメータ箇所取得できるがlocation.search.substring(1)で取得。
    少し処理軽くなる程度。
  3. 28行目:
    getParamVal()の引数にキーを渡すと値が返ってくる。

現状、キーを渡すと値が取得できれば問題ないので下記のfunctionのみ用意。

getIsParam();
パラメータが存在するかどうか
ある場合:true、ない場合:false
getParamVal()
キーを渡すと値が返ってくる

下記のような感じで使用。

var kpa = new KepParamAnalysisClass();
if(kpa.getIsParam()){
    //パラメータがある時の処理
    var plan = kpa.getParamVal('plan');
    var price = kpa.getParamVal('price');
}else{
    //パラメータがない時の処理
}
  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/js-url-get-param/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP