2020年05月12日

JavaScriptでGetの引数を取得する方法

お世話になっております。
SeekNextの佐藤です。今回はJavaScriptにてGetの引数を取得する方法を解説していきます。

私が実際に案件で使用した例を書いていこうと思います。

案件内容

・クリックしたら開くタブをリンクによって開いた状態にしておきたい。

GETの引数を取得する関数

function getParam (name, url) {
  if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
    var results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

次のようなリンクがありそれぞれに合うタブを初期で開きたい。

リンクがあるページ(HTML)

<ul>
  <li><a href="seeknext.co.jp?tab=0">リンク1</a></li>
 <li><a href="seeknext.co.jp?tab=1">リンク2</a></li>
 <li><a href="seeknext.co.jp?tab=2">リンク3</a></li>
 <li><a href="seeknext.co.jp?tab=3">リンク4</a></li>
</ul>

タブがあるページ(HTML)

<ul>
 <li><button class="btn" type="button">タブ0</button></li>
 <li><button class="btn" type="button">タブ1</button></li>
 <li><button class="btn" type="button">タブ2</button></li>
 <li><button class="btn" type="button">タブ3</button></li>
</ul>

処理(JS)

// タブのボタンを取得
let btn = $('.btn');

// パラメーターが存在していたら
if (this.getParam('tab')) {
  let para= this.getParam('tab');
  btn.eq(para).addClass('active');
}

以上、になります。今回は簡単な例で説明しましたが意外と使う機会が多いと思うので是非参考にしてみて下さい。