【JavaScript】URLパラメータを操作する

No Comments

JavaScriptにて、URLのパラメータを操作することは少なくありません。

今まではURLからパラメータ部分を切り取り、splitを駆使してやっていました。

しかし、大変便利なメソッドがあるんですね。

URLSearchParamsというメソッドです。
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

名前からしてURLSearchParamsを使うためのメソッドですね。

コンストラクタの引数にURLのパラメータを設定すると、いい感じに動きます。

こちらは、URLのキーとパラメータを表示するだけのJavaScriptです。

let urlSearch;
let urlParams;
let iterator;
let result;

// URLのパラメータを取得する
urlSearch = window.location.search;
// URLSearchParamsをインスタンス化する
urlParams = new window.URLSearchParams(window.location.search);

// イテレータを取得する
iterator = urlParams.keys();
// 値を取得する
result = iterator.next();
while(!result.done){

    let paramKey;
    let paramValue;

    // キーを取得する
    paramKey = result.value;
    // 値を取得する
    paramValue = urlParams.get(paramKey);
    // 表示する
    console.log(paramKey + ' = ' + paramValue);

    // 次のキーを取得する
    result = iterator.next()
}

let urlSearch;

let urlParams;

let iterator;

let result;

// URLのパラメータを取得する

urlSearch = window.location.search;

// URLSearchParamsをインスタンス化する

urlParams = new window.URLSearchParams(window.location.search);

// イテレータを取得する

iterator = urlParams.keys();

// 値を取得する

result = iterator.next();

while(!result.done){

let paramKey;

let paramValue;

// キーを取得する

paramKey = result.value;

// 値を取得する

paramValue = urlParams.get(paramKey);

// 表示する

console.log(paramKey + ' = ' + paramValue);

// 次のキーを取得する

result = iterator.next()

}

splitでバラバラにするよりよっぽど簡単ですね。

ちなみに、IEでは動かないようなのでご注意ください。

No comments.

コメントを残すコメントをキャンセル

« 【Chrome拡張】CSSが反映されない

【JavaScript】forEach内のthisを指定する »

下っ端の落書き帳

【JavaScript】URLパラメータを操作する