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

概要

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