本ページはHIGA TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。

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

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

HIGA TSUBAS

Frontend Engineer HIGA TSUBAS

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

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

RECOMMEND 関連する記事