【JavaScript】指定したドメインのURLを持つaタグにtarget="_blank"を追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで指定したドメインのURLを持つaタグにtarget="_blank"を追加する方法をご紹介しています。

JavaScripで指定したのURLを持つaタグにtarget="_blank"を追加したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

本記事でやりたいのは、ページ内に存在する全てのaタグを取得し、指定したドメインのURLを持つaタグにtarget="_blank"を追加することです。指定するドメインは将来的に増減する可能性があるため、引数のように実行時に指定できるような設計が望ましいと考えています。

下記は本記事で作成する成果物のデモです。InstagramとTwitterのドメインのURLを持つaタグにtarget="_blank"を追加しています。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

CodePenからInstagramとTwitterに直接アクセスできないようですが、自サイトに実装した場合は問題なく動作します。

指定したドメインのURLを持つa要素にtarget="_blank"を追加する

前項のデモで使用しているHTMLとJavaScriptを掲載します。JavaScriptの各行にコメントを記載しています。独自にカスタマイズする場合に参考にしていただければ幸いです。

HTML

<a href="https://www.instagram.com/">Instagram</a>
<a href="https://twitter.com/">Twitter</a>
<a href="https://into-the-program.com/">Into the Program</a>

JavaScript

//関数定義
const myFunc = (...args)=>{

    //ページ内のすべてのa要素を取得
    let elements = document.querySelectorAll('a');

    //a要素の数だけ繰り返し処理    
    for(el of elements){

        //a要素のhrefのhostが引数内のドメインと一致するか
        if(args.includes(el.host)){

            //一致の場合はtarget="_blank"を追加
            el.setAttribute('target', '_blank');
        }
    }
};


//関数実行（ドメイン指定）
myFunc(
    'www.instagram.com',
    'twitter.com',
);

最後に

本記事の内容は、制作時というよりは保守・運用のフェーズで役立つ内容となっています。Webサイト・Webアプリを公開するタイミングであればaタグに直接target="_blank"を指定できるため問題はないですが、保守・運用をする中で担当者が変わったり、第三者から引き継いだWebサイトやWebアプリに追加が必要になった場合に便利かなと思います。もし本記事の内容と同様の機能が必要になった場合は参考にしてくださいね！

以上、JavaScriptで指定したドメインのURLを持つaタグにtarget="_blank"を追加する方法のご紹介でした！