【JavaScript】外部リンクにtargetを自動追加して別タブで開くようにする

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでページ内もしくは要素内の外部リンクにtarget="_blank"を自動で追加して別タブで開くようにする方法をご紹介しています。

全外部リンクにtargetを設定するの大変だから、自動で追加する方法ないかな?

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

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

本記事で実現できること

冒頭でご説明した通り、外部リンクにtarget="_blank"を自動で追加して、別タブで開くようにすることが目的です。外部リンクを扱うので、セキュリティ面を考慮して、rel="noopener noreferrer"も併せて追加するようにします。

下記は完成形のデモです。リンクだけなのでわかりにくいのですが、外部リンクにtarget="_blank"rel="noopener noreferrer"を追加することができています。制作者の方は、ブラウザの開発ツール等で要素の属性をご確認いただければと思います。

See the Pen A Element Target Blank by ryohei (@intotheprogram) on CodePen.

CodePenのドメインはcdpn.ioなので、それ以外のリンクが外部リンクになっています。rel属性も適切に設定できいます。これで実現したい要件はクリアできていますね。

では、実際に中身の処理内容を見ていきましょう。

外部リンクにtargetを自動追加して別タブで開くようにする

完成したソースが下記になります。HTMLは通常のリンクのリストです。JavaScript側の処理についてはコメントに記載の通りです。

HTML

<div id="app">
    <ul>
        <li><a href="https://cdpn.io/">https://cdpn.io</a></li>
        <li><a href="https://www.google.com/">https://www.google.com/</a></li>
        <li><a href="https://www.yahoo.co.jp/">https://www.yahoo.co.jp/</a></li>
        <li><a href="https://www.bing.com/">https://www.bing.com/</a></li>
        <li><a href="https://into-the-program.com/">https://into-the-program.com/</a></li>
    </ul>
</div>

JS

//ページのドメインを取得
const domain = document.domain;
//取得したドメインを検証対象に指定
const regexp = new RegExp(domain);

//特定の要素内に存在するa要素が対象
const target = document.getElementById('app');
const elements = target.getElementsByTagName('a');

//ページ内に存在する全てのa要素が対象
//const elements = document.getElementsByTagName('a');

for(let element of elements){
    //a要素のhref(リンク)を取得
    let href = element.getAttribute('href');
    
    //a要素のhref(リンク)にドメインが含まれていなければ
    if(!regexp.test(href)){
        //a要素にtarget="_blank"を追加する
        element.setAttribute('target', '_blank');
        //a要素にrel="noopener noreferrer"を追加する
        element.setAttribute('rel', 'noopener noreferrer');
    }
}

ソースはここまでです。上記をページに組み込むことで外部リンクにtarget="_blank"rel="noopener noreferrer"を自動で追加することができます。

最後に

今回本記事の処理を作成した経緯として、WordPressの投稿にリンクを入力する際に、外部リンクの場合に別タブで開くにチェックを入れ忘れることがあるので自動で追加できないか、という相談があり実装にいたりました。

WordPressにはリンクを細かく設定することができるWP External Linksというプラグインがあり、こちらでも同様の機能…どころかより詳細な設定を指定することができます。リンクに対してあれこれ指定したい場合はプラグインを、外部リンクを別タブで開くくらいの機能で良ければ、本記事の内容を参考にしていただければと思います。

以上、JavaScriptで外部リンクにtargetを自動追加して別タブで開くようにする方法のご紹介でした!

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のライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。