ページに埋め込まれたリンク先のアドレス（URL）が内部リンクかどうかをJavaScriptを使って調べる方法

presented by 役に立つかもしれないBlog

ページに埋め込まれたさまざまなリンクの中には、大きくわけて内部リンクと外部リンクがありますが、ページ上で区別して表示したいと思ったことはないでしょうか？

wikipedia_external_link_sample.jpg例えばWikipediaみたいにリンクの隣に外部リンクであることを表すアイコン画像を表示させたり。　これをHTMLを書くときには特に意識せず、訪れたユーザーがページを表示したときに判別できるようにJavaScriptで表示を変更できれば便利ですよね。

これを簡単に判別できる命令「isInternalLink」を作ってみました。　どこかで誰かが作っているライブラリには入ってそうな命令ですが（Javaでは見つけましたが）、検索したところJavaScriptにはなかったので自作してみました。

isInternalLink関数

/**
 * リンクURLが内部リンクかどうかを調べる
 *
 * @param String url リンク先アドレス
 * @return Boolean 内部リンクの場合はtrue, それ以外はfalseを返す
 */
function isInternalLink(url) {
	if (typeof(url) != 'string') {
		return false;
	} else if (url.indexOf(location.protocol + '//' + location.host) == 0) {
		return true;
	} else if (url.match(/^https?:\/\//)) {
		return false;
	} else {
		return true;
	}
}

サンプルデモ

動くサンプルを作ってみました。　テキスト入力欄にURLアドレスを入力して「チェック」ボタンを押すと、内部リンク用のアドレスかどうかを調べてくれます。

    結果： 


解説

まず10行目の条件分岐ですが

} else if (url.indexOf(location.protocol + '//' + location.host) == 0) {

これは、location.protocolで「http:」か「https:」のいずれかの文字列を取り出し、それに「//」を繋げ、最後にlocation.host（自サイトのホスト名: colo-ri.jp, weather.yahoo.co.jp, example.jp:8080などが取得できます）を繋げることで、urlrootとかbaseuriといった類の文字列が生成されます。　うちのサイトであれば「http://colo-ri.jp」という文字列が生成されます。

この文字列がパラメータの文字列の先頭に出てくれば内部リンクなのでtrueを返します。

次に12行目の条件分岐

} else if (url.match(/^https?:\/\//)) {

いちおう、この関数はhttpプロトコルとhttpsプロトコル用のアドレス限定になっているのですが、自分のホスト名を持ったURLではないURLは全て外部リンクになりますので、これを正規表現で判別します。

4番目の分岐はもうそれ以外ということで内部リンクである、と判断します。　本当はパスとして妥当な文字列かどうかも判断したほうがいいのでしょうが、それまでやってしまうと非常に複雑になってきますので遠慮させてください。　この関数に与えるパラメータをどこから引っ張ってくるかで、その辺りの厳密性を検討するのがいいかなと思います。

　 　 このエントリーをはてなブックマークに追加

このページに関連のある記事はこちら