概要
純正の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