JS memo

お洒落にJavaScript。

2019年4月13日13:25

JavaScriptでパラメーターを取得する簡単な方法

メインビジュアル

JavaScriptでパラメーターを取得する簡単な方法

JavaScriptでURLのパラメーターを自由自在に取得する方法を書きました。

目次

  1. パラメーターとは?
  2. パラメーターの取得方法
  3. まとめ

パラメーターとは?

まずJavaScriptでパラメーターを扱う前にパラメーターとは何かとその用途を簡単にご説明しておきます。

URLパラメーターは?か&の後ろに"key=value"という形でURLにくっついている変数のことで、主にページからページへのデータのやりとりを行う際に必要となる情報です。

Google検索の例で考えてみましょう。

以下のURLはkey(q)にvalue(プログラミング)が格納されたパラメーターがくっついています。
Googleはq=を検索するキーワードが格納されているkey、"プログラミング"をキーワードとして認識します。そのため、このURLをブラウザに入力すると"プログラミング"で検索した結果ページが表示されます。このようにパラメーターが引き継がれたページはそのパラメーターを元にページの情報を操作することができます。

別の例として旅行会社の比較サイトを運営しているとします。

お客さんが自分の比較サイトから提携している旅行会社のホテルを買った際に、"自分のサイトから買った"という証拠を残さないと 売り上げにならないですよね。その際にパラメーターを受け継いで行くことで自分のサイトから買ったと言う情報を残すことができます。

ちなみにcookieでも上記のようなデータの受け渡しが可能です。cookieとパラメーターの主な違いはパラメーターは 一度外れてしまうと引き継いで行くことができなくなるのに対し、cookieは一度格納されれば期間内であればいつでもデータを見ることができることです。パラメーターは"その場限り"と言う感じです。

パラメーターの取得方法

パラメーターの取得方法を順に見ていきましょう。

パラメーターをURLから取得

https://www.parameter.com/?key=value

上記のURLからパラメーターを取得した場合

const param = location.href.substring(1) // ?key=value

最初の?を取得したくない場合(3種類)

const param = location.search.substring(1); // key=value
const param = location.search.slice(1); // key=value
const param =location.search.substr(1); // key=value

※ちなみにURLにパラメーターとアンカータグが付いている場合、パラメーター、アンカータグの順に付いているのが正しいですが、アクシデントでアンカータグが前に付いていた場合、 上記の方法ではパラメーターを取得できません。その場合は以下のように設定します。

const url = location.href;
const param = url.substring(url.indexOf("?")); // ?key=value;

パラメーターごとに分けて保存

https://www.parameter.com/?key=value&key2=value2&key3=value3

パラメーターが2個以上付いていた場合、それぞれのパラメーターをObjectに格納する方法です。

const params = location.href;
function getParams(params){
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  const params_obj = {};
  let match;
  while(match = regex.exec(params)){
    params_obj[match[1]] = match[2];
  }
  return params_obj;
}
console.log(getParams(params)); //{key: "value", key2: "value2", key3: "value3"}

まずlocation.hrefでURLを取得します。

regexで【 &(?) 文字列 = 文字列 】の形式を正規表現で指定します。
※([^=#]+)の#はアンカータグが付いていた場合にアンカーを含めないためです。

const regex = /[?&]([^=#]+)=([^&#]*)/g;

次にlocation.hrefで取得したパラメーターたちからregexで指定した値を全て取得するよう設定し、オブジェクトに格納していきます。

const params_obj = {};
let match;
while(match = regex.exec(params)){
  params_obj[match[1]] = match[2];
}

※&をplitで配列に格納指定く方法もありますが、アンカータグが付いている場合は注意が必要です。

まとめ

パラメーターとはページの情報を操作するためのデータのことで、検索サイトで入力したキーワードやユーザーの行動を分析する時などに使用されます。またJavaScriptで取得、操作することが簡単にできます。