1. Qiita
  2. 投稿
  3. JavaScript

相対URLを絶対URL(URI)に変換する方法について

  • 13
    いいね
  • 6
    コメント
この記事は最終更新日から1年以上が経過しています。

注意

本記事は、クライアントサイド(ブラウザ上)でのJavaScriptについて言及しています。
サーバサイドのJavaScriptは考慮していません。

概要

相対URLを絶対URLに変換する方法として、a要素のhrefプロパティを参照する方法を考えた。
hrefプロパティに設定したURLは、絶対URLに変換される。それを利用する方法だ。
具体的には、以下のようにすれば良いと考えた。

function absolutePath(path) {
    var e = document.createElement('a');
    e.href = path;
    return e.href;
}

検索

しかし、この程度の思いつき、既に誰かがやっているだろう。
Googleで検索した所、innerHTMLプロパティを使用した方法を発見。

【javascript】 相対パスを絶対パスに変換する|自家用辞典

IE 6、IE 7、Firefox 2.0、Opera 9 対応。

function absolutePath(path) {
    var e = document.createElement('span');
    e.innerHTML = '<a href="' + path + '" />';
    return e.firstChild.href;
}

alert(absolutePath('/'));

Internet Explorer 11.0.9600.17501のF12開発者ツールで試した所、
IE5,IE7ではinnerHTMLプロパティを使用しないとhrefプロパティの値が絶対URLに変換されない。
初めて知った…

改善案

だが、innerHTMLプロパティによる挿入は遅い。
そこで、insertAdjacentHTMLメソッドによる動作を試みる。

function absolutePath(path) {
    var e = document.createElement('span');
    e.insertAdjacentHTML('beforeend', '<a href="' + path + '" />');
    return e.firstChild.href;
}

Internet Explorer 11.0.9600.17501のF12開発者ツールで試した所、
IE5,IE7でも正常に動作した。

問題

insertAdjacentHTMLメソッド自体がFirefox 8.0以降から対応しているため、
Firefox 2.0からFirefox 7.xまでの対応は不可能になるが、
普及していたInternet Explorer 6の対応も不要となり、Internet Explorer 8も見限られるような現在、
Firefox 7.x以前のブラウザを気にかける必要があるだろうか。

まとめ

本記事のinsertAdjacentHTMLメソッドを利用したコードについて、意見を聞きたい。

追記

"はそもそもURLに使用できない文字だが、それも許容するならば&quot;に置換した方が良いかもしれない。

function absolutePath(path) {
    var e = document.createElement('span');
    e.insertAdjacentHTML('beforeend', '<a href="' + path.replace(/"/g, '&quot;') + '" />');
    return e.firstChild.href;
}