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

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

概要

純正のJavaScriptでクエリパラメータを取得する方法を記載。
ブラウザURLから指定したパラメータ名に紐づくパラメータ値を取得

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

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

TL;DR

function getQueryParam(key) { 
  // 1.URL取得 (ハッシュ込み) 
  var url = window.location.href; 
  // 2.URLから (指定したパラメータ名~&|$|#) で終わる箇所を抜き出し 
  var value = url.match(new RegExp("[?&]" + key + "=(.*?)(&|$|#)")); 
  // 3.パラメータ名に一致する値が存在しない場合は空返却 
  if (value == null) return ''; 
  // 4.パラメータ名に一致する値が存在した場合は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