update: Last updated: 6354view
【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
キーと値がセットとなりますが、見づらいので色を変えてみましたw
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を取得してパラメータの値を抽出させる方法