jQueryで外部リンクを自動判別して[target=”_blank”]とクラスを付与する方法

webサイトを作成する際に、別窓で開きたい外部リンクなどにはaタグに[target=”_blank“]とつける。
WordPressの投稿などでリンクを設置する場合はリンクを設置する際に[リンクを新しいタブで開く]にチェックマークを入れる。
こうすることでaタグに[target=”_blank“]が付与されます。

ただ、毎回この作業をやるのは正直面倒ですね。

なのでjQueryで以下のコードを記述して、外部リンクを自動で判別。
ついでにcss調整用にclassもつけちゃいましょう。

jQuery('a[href^=http]')
.not('[href*="'+location.hostname+'"]')
.attr({target:"_blank"})
.addClass("blank")

これで自動的に外部リンクを判別して該当のaタグには[blank]というクラスが付与されます。
あとはcssで色を変えて見たり、アイコンを追記したりが可能です。
ちなみに以下の例はsassで、外部リンクのテキストの前にフォントオーサムのアイコンを挿入します。

a.blank {
	&:before{
		content: "\f08e";
		font-family: FontAwesome;
		padding: 0 5px;
	}
}

余談ですが、クラスを付与しなくても以下の記述で同様のcssが実現できます。

a[target="_blank"] {
	&:before{
		content: "\f08e";
		font-family: FontAwesome;
		padding: 0 5px;
	}
}

このあたりはお好みで。