【jQuery】ページ内の全リンクに共通クラスを自動付与する完全ガイド｜外部リンク・条件付き・target=”_blank”・セキュリティまで

ページ内のすべての外部リンクにアイコンを付けたり、特定の条件に合うリンクだけ装飾を変えたりする処理は、jQueryで簡単に一括対応できます。この記事では全リンクへのクラス付与・外部リンクの自動検出・target=”_blank”のセキュリティ対策・noopenerの自動付加まで解説します。

全リンクにクラスを付与する基本

$(function () {
  // ページ内の全 <a> 要素にクラスを追加
  $('a').addClass('link-styled');

  // hrefがあるリンクのみ（アンカー <a name='top'> を除く）
  $('a[href]').addClass('link-styled');

  // 特定のコンテナ内のリンクのみ
  $('.entry-content a[href]').addClass('link-styled');
});

外部リンクを自動検出してクラス・アイコンを追加する

$(function () {
  var currentHost = location.hostname; // 例: 'codingls.com'

  $('a[href]').each(function () {
    var href = $(this).attr('href');

    // プロトコル相対URL・http/httpsリンクで別ドメインのものを外部リンクとして判定
    var isExternal = /^https?:\/\//i.test(href) &&
                     href.indexOf(currentHost) === -1;

    if (isExternal) {
      $(this).addClass('external-link'); // 外部リンクのクラス
    }
  });
});

外部リンクにtarget=”_blank”とnoopenerを自動付加する

外部リンクを新しいタブで開く場合、rel="noopener noreferrer" の付加がセキュリティ上必要です。

$(function () {
  var currentHost = location.hostname;

  $('a[href]').each(function () {
    var href = $(this).attr('href');
    var isExternal = /^https?:\/\//i.test(href) &&
                     href.indexOf(currentHost) === -1;

    if (isExternal) {
      $(this)
        .attr('target', '_blank')                    // 新しいタブで開く
        .attr('rel', 'noopener noreferrer')          // セキュリティ対策
        .addClass('external-link');
    }
  });
});

PDFやダウンロードリンクに自動でクラスを付ける

$(function () {
  // PDFリンク
  $('a[href$=".pdf"]').addClass('link-pdf').attr('target', '_blank');

  // ダウンロードリンク（download属性がある）
  $('a[download]').addClass('link-download');

  // 複数の拡張子
  $('a[href]').filter(function () {
    return /\.(pdf|doc|docx|xls|xlsx|zip)$/i.test($(this).attr('href'));
  }).addClass('link-file');
});

WordPressの投稿内リンクに限定する

$(function () {
  var currentHost = location.hostname;

  // .entry-content（投稿本文）内のリンクのみ対象
  $('.entry-content a[href]').each(function () {
    var href = $(this).attr('href');
    var isExternal = /^https?:\/\//i.test(href) &&
                     href.indexOf(currentHost) === -1;

    if (isExternal) {
      $(this)
        .attr({ target: '_blank', rel: 'noopener noreferrer' })
        .addClass('external-link');
    }
  });
});

まとめ

jQueryでリンクに自動クラス付与する際のポイントをまとめます。

• 全リンク: $("a[href]").addClass("cls")
• 外部リンク検出: location.hostname と比較
• target=”_blank”: 必ず rel="noopener noreferrer" をセット
• ファイルリンク: [href$=".pdf"] または正規表現で拡張子フィルタ

関連記事: URLに特定の文字列が含まれているか判定する方法 / imgタグのalt属性を取得・設定する完全ガイド

よくある質問（FAQ）