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

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

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

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

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

本記事で実現できること

冒頭でご説明した通り、外部リンクに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を自動追加して別タブで開くようにする方法のご紹介でした！