zaki work log

作業ログやら生活ログやらなんやら

[JavaScript] URLSearchParamsを使ったクエリ文字列の解析

URL中のQuery StringはURLSearchParamsを使って簡単にparseできる。

developer.mozilla.org

const param = new URLSearchParams(('key1=%E3%82%AD%E3%83%BC1&key2=%E5%80%A41'));

なお、URLデコードも自動で行われる。

値の参照

これはキーが分かってる場合。

param.get('key1');

キーの列挙

キーを列挙するには以下。

for (const key of param.keys()) {
    console.log(key);
}

キー・値のペアを列挙

for (const [key, val] of param) {
    console.log(key);
    console.log(val);
}

アクセス中のURLのクエリ文字列を取得

ブラウザでアクセス中のページのQuery Stringはwindow.location.searchで参照できる。

if (window.location.search.length > 0) {
    const param = new URLSearchParams(window.location.search);
    for (const [key, val] of param) {
        console.log(key);
        console.log(val);
    }
}

任意のURLの場合

Query String付きの任意のURLの場合、?までを切り落としてURLSearchParamsを使ってもいいが、URL文字列を解析するURLを使えば、内部処理でURLSearchParamsを使用してQuery String部分がparseされるので楽。

const url = 'https://www.google.com/search?q=%E8%99%B9%E3%83%B6%E5%92%B2&sourceid=chrome&ie=UTF-8';
const url_obj = new URL(url);
const param = url_obj.searchParams;
console.log(param.get('q'));

developer.mozilla.org


ちなみにGoogle Apps ScriptだとURLSearchParamsは使えない。