【jQuery】外部リンクを無効化して内部リンク化する（すべてのアンカー要素の target 属性を空の文字列に変更する）

外部リンクを無効化して内部リンク化するためには、すべてのアンカー要素の href 属性を変更し、かつ target 属性を空の文字列に設定する必要があります。

コード

以下の例では、外部リンクを無効化するために、href 属性の値を # に変更しています。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('a').each(function(){
                // target属性を空の文字列に設定
                $(this).attr('target', '');

                // href属性が"http"または"https"で始まる場合は無効化
                if ($(this).attr('href').startsWith('http')) {
                    $(this).attr('href', '#');
                }
            });
        });
    </script>

以下、解説です。

jQueryライブラリをGoogleのCDNから読み込む

CDNからjQueryライブラリを読み込みます。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(function(){ … })

これは、jQueryのドキュメントレディイベントのショートカットです。

$(function(){ ... });

ページのDOM（Document Object Model）が完全に読み込まれ、解析された後に中の関数が実行されることを保証します。

$(‘a’).attr(‘target’, ”)

• $('a'): これはすべてのアンカー（<a>)要素をjQueryで選択するためのセレクターです。
• .attr('target', ''): これは、選択されたすべてのアンカー要素のtarget属性を空の文字列に設定します。これにより、リンクが同じタブで開かれるようになります。

    $('a').each(function(){
        // target属性を空の文字列に設定
        $(this).attr('target', '');

        // href属性が"http"または"https"で始まる場合は無効化
        if ($(this).attr('href').startsWith('http')) {
            $(this).attr('href', '#');
        }
    });

1. $(function(){ ... });
   • ページのDOMが完全に読み込まれた後に関数を実行します。
2. $('a').each(function(){ ... });
   • すべてのアンカー要素を反復処理します。
3. $(this).attr('target', '');
   • 現在のアンカー要素の target 属性を空の文字列に設定します。
4. if ($(this).attr('href').startsWith('http')) { ... }
   • 現在のアンカー要素の href 属性が http または https で始まる場合（外部リンクの場合）に無効化します。
5. $(this).attr('href', '#');
   • href 属性を # に変更し、リンクを無効化します。

まとめ

このコードを使うことで、ページ内のすべてのリンクがクリックされた際に、新しいタブやウィンドウではなく、同じタブやウィンドウで開かれるようになります。