jQuery 背景のURLを取得しimgで表示

質問

スマホサイトの作成をしています。

やりたい事は、タイトル通りで
jQueryを使って、
あるブロック要素の背景画像のURLを取得し、
そのデータをimgのsrc属性に入れて
imgとして表示したいと考えております。

補足としいて
・imgは、同じブロック要素内に表示します。
・取得するbackground-imageは絶対パスで書かれているものです。

スクリプトは以下のように書きました。
----------------------------------------
var bgImg = $("#box").css("background-image");

var bgImgFile = bgImg.substring(5, bgImg.length - 2);

$("#box").prepend("<img src='" + bgImgFile + "'>");

//最終的に#boxの背景画像をなくす処理
$("#box").css("background-image","none");

----------------------------------------

ですが、bgImgの値がブラウザによって違うのです。
alert(bgImg)で確認してみると、下記のようにalert表示されました。

●Firefoxでは　
　url("http://****.jpg")

●ios(iphone)では
　url(http://***.jpg)　　← " "が付いていない

これにより、結果、bgImgFileの値が変わってしまい、
ios(iphone)では背景画像を表示できません。

もし可能であれば、これの原因や、
他にもし方法があれば教えて下さると助かります。

詳しい方、どうぞ宜しくお願いいたします。

回答No.1

LancerVII · ベストアンサー

こんにちは。

>もし可能であれば、これの原因や、
>他にもし方法があれば教えて下さると助かります。

ブラウザの仕様で返ってくる値が違うというのが原因です。
取得したパスからURLのみ取得してあげるようにすれば良いと思います。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7410650/

==== JavaScript
$().ready ( function() {
$('#box').
append ( $('<img />').attr('src',$('#box').css('background-image').match(/https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+[a-z]/g)) ).
css ( 'background-image', 'none' );
});

多分これで動くと思いますが、iphoneを持っていないので確認取れていません。

お礼

こんばんは

LancerVIIさん、いつもありがとうございます。
またまた、お世話になってしまいました。
感謝です～。

URLのみ取得ですね。
そっか～なるほど。

ちょっと、まだ確認できていないですが、
スクリプトを参考にやってみます。

まずは御礼まで。
ありがとうございました。

補足

御礼2回目です。

LancerVIIさんのアドバイスどおりに、実装、確認し
無事に期待通りできました！
あらためて御礼申し上げます。

ただ、正規表現た難しいですね。
参考書をひもとき、調べていますが…分からない部分が多いです。
ここは、もう少し、ひもといてみたいと思います。

サンプルとスクリプト、いつもご丁寧な解説をありがとうございました。