システム開発とデジタルマーケティング

カレントページのURLからグローバルナビゲーションのリンクをJSでハイライトする

グロナビのリンクがカテゴリ別になっていたとして、今自分がアクセスしているページのカテゴリをハイライトしたいという事ってよくありますよね。
WordPressだとリンクをある程度自動的に作ってくれるのでグロナビを実装することは難しくないですが、ハイライトしたいと思うとちょっと面倒です。
テンプレートで実装すると面倒なので、今回はJavaScriptで実装する方法をご紹介します。

想定しているグロナビリンクの構造は下記の構造。

<ul id="gnavi_links">
  <li><a href="/works/cate1/index.html">CATE1</a></li>
  <li><a href="/works/cate2/cate2-1/index.html">CATE2</a></li>
  <li><a href="/works/cate3/">CATE3</a></li>
  <li><a href="/works/abount.html">ABOUT</a></li>
</ul>

記事はそれぞれ、

みたいな感じを想定。
ページのURLから、同じカテゴリ(ディレクトリ)を指しているグロナビリンクにClassを付与する。

var highlight_gnavi_links = function() {
  var active_class = 'active'; // 付与するクラス名
  var base_url     = 'https?:\\/\\/[^\\/]+\\/[^\/]+\\/'; // ベースになるURLを設定
  var base_cate_re = new RegExp('^' + base_url + '([^\\/]+)(\\/.*)?$', 'i'); // グロナビリンクがディレクトリで終わるパターン
  var base_page_re = new RegExp('^' + base_url + '(.+\\.(html|php))$', 'i'); // グロナビリンクがファイル名で終わるパターン
  var current_cate, current_cate_re, current_page, current_page_re;
  var $gnavi_links = $('#gnavi_links li a');
  
  $gnavi_links.removeClass(active_class);
  if (base_cate_re.test(location.href)) {
    // for Category
    current_cate = location.href.replace(base_cate_re, "$1");
    current_cate_re = new RegExp('\\/' + current_cate + '(\\/.*$|$)', 'i');
    $gnavi_links.each(function() {
      if (current_cate_re.test($(this).attr('href'))) { $(this).addClass(active_class); }
    });
  } else if (base_page_re.test(location.href)) {
    // for Webpage
    current_page = location.href.replace(base_page_re, "$1");
    current_page_re = new RegExp('\\/' + current_page + '$', 'i');
    $gnavi_links.each(function() {
      if (current_page_re.test($(this).attr('href'))) { $(this).addClass(active_class); }
    });
  }
};

これで <a href="/works/cate1/index.html" class="active">CATE1</a> みたいになります。
めでたしめでたし