JavaScriptでクエリパラメータを取得

方法

new URL(decodeURIComponent(document.location.href)).searchParams.get(<keyName>)

で取得できます。

解説

http://example.com/?param1=hoge&param2=fuga

例えばこのようなクエリパラメーターつきのURLがあるとします。
それぞれparam1とparam2の値である"hoge"と"fuga"を取得したいと思います。

URLを取得

document.location.href
// "http://example.com/?param1=hoge&param2=fuga"

パーセントエンコーディングに対応させる場合

decodeURIComponent(document.location.href)

このようにしてデコードできます。

パラメータを取得

new URL(decodeURIComponent(document.location.href))
// URL {...}

先ほどのURLからURLオブジェクトを作ります。

new URL(decodeURIComponent(document.location.href)).searchParams
// URLSearchParams {...}
new URL(decodeURIComponent(document.location.href)).searchParam.get("param1")
// "hoge"
new URL(decodeURIComponent(document.location.href)).searchParam.get("param2")
// "fuga"

そしてURLSearchParamsオブジェクトに対して、getメソッドでキーを指定することでパラメータを得ることができます。