WebDesign Dackel

jQueryを使って相対パスをhttpから始まる絶対パスに変換

jQueryを使って相対パスをhttpから始まる絶対パスに変換

Hatena0
Google+0
Pocket0
Feedly0

ちょっと忘れないようにメモです。

この前、色々とプラグインの中身を見ていたら相対パスを絶対パスに変換する面白いコードがありました。

タイトルにある様なことをする時に、前だったら現在のURLを取得してそれを基になんやかんや…って結構めんどくさいことをしそうでしたが、そのプラグインにあったコードは以下です。

function convertAbsUrl( src ){
    return $("<a>").attr("href", src).get(0).href;
}

正確にこのままってわけではありませんが、大体こんな感じでした。
なんとたったの一行でやっているではありませんかっ!!
実行の内容は、空のaタグを作って相対パスとなる文字列を指定。作った空の<a>タグのDOMからhref属性値を取得するだけです。
そうすることで、なんと相対パスがhttp://から始まる絶対パスに変換されていました。

JSをしっかりと理解されている方からすれば、何を今更な、といった内容だと思いますがこんな方法もあるのか!と結構衝撃的だったのでメモとして残しておこうと思いました。

ちなみに、実際こんな感じで使えます。

var url = "../images/test.jpg";
console.log( convertAbsUrl(url) );

function convertAbsUrl( src ){
    return $("<a>").attr("href", src).get(0).href;
}