はてなブログ記事中の外部ドメインへのリンクを新規タブで開くようにスクリプトを仕込む

はてなブログの記事をMarkdownで書いているのに、リンクを新規タブで開くようにしようと思うと、素のHTMLを書くことになります。

せっかくのMarkdownのうまみが減ってきて、重量級マークアップになってしまいます。

今回はドメインが異なる場合には、新しいタブに飛ばしたいという要望がありました。 それに対して、自動で新規タブを開くように書き換える処理を素のJavaScriptで書きました。

下調べ

jqueryで location.hostname が異なることを検知して、属性を書き換えているかたが多いようです。

• markdown記法でリンクをtarget="_blank"にする
• markdown記法でリンクを別タブ(target=“_blank”)で開く方法

試してみたところ、jqueryを読み込む処理を記述しないと動作しませんでした。 はてなブログ自体もjqueryが使われているため、むやみやたらにimportは少々懸念材料でした。

そこで素のJavaScriptで書いてみました。

JavaScriptで書いてみる

jqueryでやっていることをできる限り移植しました。 ヘッダーかフッターに挿入することで動作します。

<script type="text/javascript">
const a_tags = document.getElementsByTagName("a")

for(let a_tag of a_tags) {
    if (a_tag.href.startsWith("http") && !a_tag.href.match(location.hostname)) {
        a_tag.setAttribute("target", "_blank");
    }
}
</script>

ページ内のaタグのうち、httpで始まっており location.hostname が含まれない場合に、新規タブで開くようにしています。

match を使っているので正確ではない場合はあるかもしれませんが、おそらく滅多にないでしょう。

これで意識せずに、自ドメイン以外のサイトのリンクは、HTML読み込み後に自動で書き換えてくれます。

JavaScriptは詳しくないので、もっとよい書き方があればぜひ教えてください。