• #Javascript
• #パラメータ
• #正規表現

update:2020.5.7　Last updated:2020.5.8　5463view

【javascript】URLパラメータにある特定キーの値を取得する

URLパラメータとは。

そもそもパラメータ(parameter)とは、URLの後ろにある「？」以降の文字列のことです。

例：https://test.co.jp/test/123/sample.html?a=12345&b=67890

上記の例でいうと「?a=12345&b=67890」の部分がパラメータになります。

パラメータを使う場面でいうと、検索時に入力した検索キーワードに一致する検索結果を表示する時、ページ間でデータを受け渡したい時、などでしょうかね。

パラメータの形式

URLの後ろに「？」をつけキーと値を付与します。キーは複数持てますので「＆」でつなげます。

例：？キー1＝値1＆キー2＝値2＆キー3＝値3

キーと値がセットとなりますが、見づらいので色を変えてみましたｗ

javascriptでパラメータを取得する記述

さて、本題になります

例：https://test.co.jp/test/123/sample.html?aaa=12345&bbb=67890

例のURLパラメータにあるキー「aaa」の値は正規表現を使い一文で取得できます。

var val = location.search.match(/[&|\?]aaa=(.*?)[&|$]/);

配列val[1]にaaaの値が返ってきます。
詳しく説明いたします。

まずlocation.searchで、現在表示中のURL全体を取得できます。？以降の文字列も含めて、です。

取得できたURLから.matchで正規表現を使って文字列を検索します。マッチすれば配列で返ってきます。

配列valの中身は。

val[0]{?aaa=12345b}
val[1]{12345}

配列val[1]にaaaの値が返ってきます。

ちょっと正規表現の理解がないとなぜ[1]なのか？？と疑問かもしれませんが。

正規表現については長くなりますので省いちゃいます。

取得できた値は遷移先に付与させたり保存したり等、使い方はさまざま。

取得できたはいいが、ソースコードをどこに記述させればいいの？どうやったら読み込まれるの？となること多くないです？？
私だけかな...！？
個人的には技術系記事あるあるだと・・・

なのでこちらが、まんまです。

<script>
window.onload = function onLoad() {
  var val = location.search.match(/[&|\?]aaa=(.*?)[&|$]/);
  if(val) {
    prm = decodeURIComponent(val[1]);
    location.replace("https://testtest.co.jp/index.html?test=" + prm);
  }
 }
</script>

例として、取得したaaaの値をtesttest.co.jpの遷移先の後ろに付与させてみました。

特定のクラスのリンク全てに付与する、ということもできるので、次回そちらの方法を書いてみたいと思います。

ちなみに。
phpで取得したい場合はこちらの記事を参考にしてみてください♪

phpで取得する場合⇒【php】リファラURLを取得してパラメータの値を抽出させる方法