5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-06

概要

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

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?