JS URLのパラメーター利用

2020-06-25

サイトURLにパラメーターを付与して、その内容を取得して、処理をさせるといった方法を記載しておきます。


URLのパラメーターとは

まず、URLのパラメーターは、URLの後ろに ?変数(パラメータ)=値 をついている形をさします。
よく広告などをクリックした時に、URLをみてみると、やたら長い時などありますが、だいたいパラメーターとみられる内容がついています。
パラメーター自体は、一つだけではなく、複数つけることもできるので、その場合は、 & でつなげられています。
そして、ページを表示するときに、このパラメーターを利用しすることで、様々な処理をすることができます。


location.search

まず、サイトURLの?で始まるパラメーターの取得には、location.searchを利用して取得します。(substring(1)とすることで2文字目以降[?以外]を取得します)
もし、URLにパラメータが存在すれば、その内容を取得し、さらに、複数ある場合は、& で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。
取得後は、if文などで条件を指定して、処理を記述していくだけです。


abcde-xyz.jp?id=100 の場合

URLに id=100 というパラメータがついている場合は下記の方に処理します。

パラメーターのkeyとなる部分が id ではなく p = ◯◯◯ といった場合は、17行目の部分は、paramArray.p として、処理していきます。


備考(location.hash)

URLにパラメーターではなく、アンカー(#)がついている場合でも、処理することができます。
その場合は、下記のようになります。

アンカーの場合は、&でつなげたり、配列に格納したりすることはないので、ご注意ください。