外部リンクを新規タブで開くようにするだけ (プレーンなJavaScript)

したいこと

ブログなどのWebサイトでリンクをクリックした時、特にそのリンクが外部のWebサイトのものだと新規タブで開いた方が見る側として楽だと思います(たぶん)。 また、コンテンツ提供者側としても、自分のサイトに長く滞在してくれることになり嬉しいです。とは言ったものの1つ1つの<a>タグにtarget="_blank"と書くのは面倒なので、共通のスクリプト書きました。jQueryなど無しのプレーンJavaScriptです(ECMA 2015 (ES6) を前提としていますが。)

スクリプト

<script>
window.addEventListener("DOMContentLoaded", () => {
  document
    .querySelectorAll(`a[href^="http"]:not([href*="${location.hostname}"])`)
    .forEach(link => link.setAttribute("target", "_blank"));
});
</script>

処理はシンプルです。DOMが読み込まれた時に

1. querySelectorAllで外部リンクのaタグを取得。条件は
   • aタグのhrefがhttpで始まる絶対URL かつ
   • 現在のサイトのホスト名(このブログで言うとponsea.hatenablog.com)を含まない
2. forEachでそれぞれのリンクにtarget="_blank"HTML属性をつける

スクリプトの影響範囲は大きいのですこし注意です。

はてなブログで設定したい場合

はてなブログの場合は、デザイン => カスタム => フッタ で上記のスクリプトコピペして「変更を保存する」で、ブログ内全体で適用されます。

はてなブログでの設定