JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法

JavaScript

URLのパラメータやアンカー（#以降の部分）を取得して、その値ごとに処理を変更する方法をまとめました。

URLのパラメータで判断する場合

パラメータは、「?」+「変数(パラメータ)＝値」というかたちで構成されています。

※パラメータは1つとは限らず、複数ある場合は「&」でつないでいきます。

まずlocation.searchを利用して「?」で始まるパラメータ部分を取得します。（substring(1)とすることで2文字目以降［?以外］を取得します）
もしURLにパラメータが存在すれば、さらに「&」で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。
処理を変更するにはif文で条件を指定するだけです。

【パラメータに「id=osaka」が含まれるかどうかを調べる場合】

// URLのパラメータを取得
var urlParam = location.search.substring(1);

// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');

  // パラメータを格納する用の配列を用意
  var paramArray = [];

  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }

  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    $('.pram').append('<p>大阪です</p>');
  } else {
    $('.pram').append('<p>大阪ではありません</p>');
  }
}

URLのアンカーで判断する場合

アンカーの取得は簡単で、location.hashを利用して#以降の部分を取得します。

// URLのアンカー（#以降の部分）を取得
var urlHash = location.hash;

// URLにアンカーが存在する場合
if(urlHash){
  // アンカーが#osakaかどうかを判断する
  if (urlHash == '#osaka') {
    $('.hash').append('<p>大阪です</p>');
  } else {
    $('.hash').append('<p>大阪ではありません</p>');
  }
}

デモページ

実装例

最後に上記の処理を活用した例をご紹介したいと思います。

jQueryを利用してタブ切り替えを実装します。
URLを判断してデフォルトで開いているタブ（アクティブなタブ）を変更してみたいと思います。

下記のリンクをクリックしてみてください。（クリックするとデモページにとびます）

●　パラメータで判断

●　#以降のアンカー名で判断

上記のスクリプトにこのようなスクリプトを追加してみました。

$(window).load(function() {
  // URLにパラメータが存在する場合
  if(urlParam) {
    // タブの<a>タグのhref属性の値にパラメータidの値と同じ値が含まれている要素を選択
    var targetTabParam = $('.tab-list li a[href$="#' + paramArray.id + '"]');

    if(targetTabParam.length > 0){
      // HTML側でデフォルトで設定している'active'というクラスを削除する
      $('.tab-list li a').removeClass('active');
      // <a>タグのhref属性の値とパラメータidが同じだった場合、そのタブの<a>タグに'active'というクラスを付与する
      targetTabParam.addClass('active');
    }
  }

  // URLにアンカーが存在する場合
  if(urlHash){
    // タブの<a>タグのhref属性の値にアンカーの値と同じ値が含まれている要素を選択
    var targetTabHash = $('.tab-list li a[href$="' + urlHash + '"]');

    if(targetTabHash.length > 0){
      // HTML側でデフォルトで設定している'active'というクラスを削除する
      $('.tab-list li a').removeClass('active');
      // <a>タグのhref属性の値とアンカーが同じだった場合、そのタブの<a>タグに'active'というクラスを付与する
      targetTabHash.addClass('active');
    }
  }

  // タブ切り替えを実行
  $('.tab-body li:not('+$('.tab-list li a.active').attr('href')+')').hide();
  $('.tab-list li a').click(function(){
    $('.tab-list li a').removeClass('active');
    $(this).addClass('active');
    $('.tab-body li').hide();
    $($(this).attr('href')).fadeIn();
    return false;
  });
});

他にもパラメータやアンカーを判断して、画像を切り替えたり、背景色を変えたり、いろいろな表示の出し分けに活用できると思います。