JavaScriptでURLから純粋にクエリパラメーターを取得する簡易な方法

2019/07/05（金）

URLから純粋にクエリパラメーターを取得したい時、例外的な処理を挟まず簡易な実装で問題無い場合は以下の例でも取得することが出来ます。

まずはパラメーターを取得する関数を用意していきます。

/**
 * getQueryParam
 * @description urlのクエリを取得します.
 * @link https://qiita.com/awa20/items/614b29be9f97a7760da8
 * @return string
 */
export const getQueryParam = key => {
  const value = window.location.href.match(
    new RegExp('[?&]' + key + '=(.*?)(&|$|#)')
  );
  if (value == null) return '';
  return decodeURIComponent(value[1]);
};

main.jsでgetQueryParamを読み込み、例えばクエリ文字accessを取得したい場合は以下の様に記述するだけで取得可能です。

import { getQueryParam } from './functions';

let param = getQueryParam('access'); // 例）?access=allowのallowを取得したい場合.
console.log(param); // allow

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