【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"を追加する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら