【jQuery/JS】URLに特定の文字列が含まれているか判定する完全ガイド｜indexOf・includes・正規表現・URLSearchParamsまで

現在のURLに特定のキーワード・パス・パラメーターが含まれているかを判定することで、ページに応じたクラスの付与・コンテンツの表示切り替え・リダイレクト条件の制御などが実現できます。この記事では indexOf() から正規表現・URLSearchParams まで実用的な判定パターンを体系的に解説します。

indexOf() / includes() でURL文字列を確認する基本

window.location.href でURL全体を取得し、文字列メソッドで含まれているかを確認します。jQueryは必須ではなくネイティブJavaScriptで完結します。

indexOf()を使う方法（IE11対応）

// 現在のURL例: https://codingls.com/jquery/1448/?tab=js#section1
var url = window.location.href;

// indexOf: 見つかれば0以上のインデックス、見つからなければ-1
if (url.indexOf('jquery') !== -1) {
  console.log('jQueryカテゴリのページです');
}

// 大文字・小文字を区別しない場合はlowerCase()に変換してから確認
if (url.toLowerCase().indexOf('jquery') !== -1) {
  console.log('大文字小文字を無視して確認');
}

includes()を使う方法（よりシンプル）

var url = window.location.href;

// includes: 含まれていれば true、含まれていなければ false
if (url.includes('jquery')) {
  console.log('jQueryページです');
}

// 否定の確認
if (!url.includes('admin')) {
  console.log('管理ページではありません');
}

URLの各パーツ別に判定する

window.location.href はURL全体を返すため、クエリパラメーターやハッシュも含まれます。意図しない部分での一致を防ぐためにパーツを分けて確認することが重要です。

// 現在のURL: https://codingls.com/jquery/1448/?tab=js&page=2#faq

// パス部分のみ確認（/jquery/1448/）
if (window.location.pathname.includes('jquery')) {
  console.log('パスにjqueryが含まれる');
}

// クエリ文字列のみ確認（?tab=js&page=2）
if (window.location.search.includes('tab=js')) {
  console.log('tabパラメーターがjsに設定されている');
}

// ハッシュのみ確認（#faq）
if (window.location.hash.includes('faq')) {
  console.log('FAQセクションへのアンカーリンク');
}

// ホスト名のみ確認（開発環境と本番環境の切り分けなど）
if (window.location.hostname === 'localhost') {
  console.log('ローカル開発環境');
}

正規表現で高度なパターンマッチングを行う

単純な文字列一致では対応できない複雑なパターンは正規表現で確認します。

var path = window.location.pathname;

// /jquery/（数字）/ というパスかどうか確認
if (/\/jquery\/\d+\//.test(path)) {
  console.log('jQuery記事のURLパターンです');
}

// 特定のカテゴリページ（/jquery/ または /typescript/）
if (/\/(jquery|typescript)\//.test(path)) {
  console.log('jQueryまたはTypeScriptカテゴリです');
}

// パスが /category/ で始まるか確認
if (/^\/category\//.test(path)) {
  console.log('カテゴリアーカイブページです');
}

// 大文字小文字を無視するフラグ（i）
if (/jQuery/i.test(window.location.href)) {
  console.log('大文字小文字を区別しないでjqueryを検索');
}

URLSearchParamsで特定パラメーターの値を判定する

クエリパラメーターの値を正確に確認するにはURLSearchParams を使うのが最も確実です。includes("tab=js") だと tab=json でも一致してしまいます。

var params = new URLSearchParams(window.location.search);

// tabパラメーターが正確に'js'かどうか確認
if (params.get('tab') === 'js') {
  console.log('JavaScriptタブが選択されています');
}

// パラメーターが存在するかどうか（値は問わない）
if (params.has('debug')) {
  console.log('デバッグモードが有効です');
}

// 複数パラメーターの同時確認
var isFiltered = params.has('category') && params.has('tag');
if (isFiltered) {
  console.log('カテゴリとタグ両方で絞り込まれています');
}

複数条件（AND・OR）のチェック

var url  = window.location.href;
var path = window.location.pathname;

// AND条件: パスに「jquery」を含み、かつクエリに「page」を含む
if (path.includes('jquery') && window.location.search.includes('page')) {
  console.log('jQueryのページネーション付きページ');
}

// OR条件: 「jquery」または「typescript」を含む
if (path.includes('jquery') || path.includes('typescript')) {
  console.log('プログラミング言語系の記事');
}

// 配列で複数キーワードを一括チェック（ANY: いずれか1つでも含む）
var keywords = ['jquery', 'javascript', 'typescript'];
var matchesAny = keywords.some(function (kw) {
  return path.includes(kw);
});

// 配列で複数キーワードを一括チェック（ALL: 全て含む）
var requiredKeywords = ['jquery', 'guide'];
var matchesAll = requiredKeywords.every(function (kw) {
  return url.includes(kw);
});

実用例：ページに応じてクラスを付与する・ナビをハイライトする

URLの判定結果を使ってjQueryで要素を動的に操作する実用的なパターンです。

現在のページのナビリンクをアクティブにする

$(function () {
  var path = window.location.pathname;

  // ナビのリンクとURLのパスが一致する項目にis-activeクラスを付ける
  $('.nav-link').each(function () {
    var linkHref = $(this).attr('href');
    if (linkHref && path.includes(linkHref) && linkHref !== '/') {
      $(this).addClass('is-active');
    }
  });
});

特定ページだけ要素を表示・非表示にする

$(function () {
  var path = window.location.pathname;

  // TOPページ（/）のみバナーを表示
  if (path === '/') {
    $('#top-banner').show();
  }

  // jQueryカテゴリのページでサイドバーウィジェットを表示
  if (path.includes('/jquery/')) {
    $('#jquery-sidebar').show();
  }

  // 記事ページ（カテゴリ/ID形式）でシェアボタンを表示
  if (/\/\w+\/\d+\//.test(path)) {
    $('#share-buttons').show();
  }
});

URLパラメーターに応じてタブを切り替える

$(function () {
  var tab = new URLSearchParams(window.location.search).get('tab');

  if (tab) {
    // 対応するタブをアクティブにする
    $('.tab-btn').removeClass('is-active');
    $('.tab-btn[data-tab="' + tab + '"]').addClass('is-active');

    $('.tab-panel').hide();
    $('#tab-' + tab).show();
  }
});

判定方法の比較と使い分け

まとめ

URLに文字列が含まれているか判定する方法は用途に応じて選びます。

• シンプルな部分一致: location.href.includes("keyword")
• パスのみ・クエリのみなど範囲を絞る: location.pathname / location.search
• 複雑なパターン: 正規表現 /pattern/.test(url)
• パラメーターの値を正確に確認: new URLSearchParams(location.search).get("key")

関連記事: URLを取得・操作する完全ガイド / addClass/removeClass/toggleClass完全ガイド

よくある質問（FAQ）