Edited at

純正JavaScriptでのクエリパラメータ取得

More than 1 year has passed since last update.


概要

純正のJavaScript(pure js)でクエリパラメータを取得する方法を記載。

ブラウザURLから指定したパラメータ名に紐づくパラメータ値を取得

を実現するために必要最低限な内容となっている想定。

ハッシュ値取得やパラメータ存在確認を目的とした利用は対象外となっている。


TL;DR


function getQueryParam(key) {
// 1.URLから (指定したパラメータ名~&|$|#) で終わる箇所を抜き出し
const value = window.location.href.match(new RegExp("[?&]" + key + "=(.*?)(&|$|#)"));
// 2.パラメータ名に一致する値が存在しない場合は空返却
if (value == null) return '';
// 3.パラメータ名に一致する値が存在した場合はURLデコードして返却
return decodeURIComponent(value[1]);
}


注意点


1.パラメータ値に& # $が含まれている場合

パラメータを取得する範囲の区切り値として& # $を利用しているため、

パラメータ値に& # $が含まれると想定外の範囲を取得してしまう可能性あり。

パラメータ値は事前にURIエンコードをする等で& # $がそのまま入る事を避ける必要がある。


2.パラメータ名にメタ文字を含む場合

パラメータ名にメタ文字を含む場合、事前にエスケープをする必要がある。

具体的には、. * + ^ | [ ] ( ) ? $ { }を含むパラメータ名である場合。

keyの値をmatchで検索する前に必要なメタ文字のエスケープ処理を挟めばOK

例) []をエスケープ : key.replace(/[\[\]]/g, "\\$&")


Reference

Javascript でURLのパラメータを取得する方法

http://www-creators.com/archives/4463

Javascript での 正規表現 の エスケープ について

https://qiita.com/ue5963/items/bd8e32ac9e6b12aa7fab