CSSのbackground-imageのURLのスラッシュが何故か消えてしまう問題について

Question

<a href="//test.html" target="_top" style="opacity:1; background-image:url({img_src});"></a>

上記の様なHTMLがあったとして、JavaScriptから置換の処理を行って、{img_src}の部分を任意のURLに設定したいのですが、どうしてもスラッシュが消えた状態のURLに置換されてしまいます。どなたか解決法をご存知の方がいらっしゃいましたら、教えて頂けますと幸いです。

実際の行いたいことを下記に順を追って説明致します。

・まず変数にHTMLを下記の様にバッククォートでHTMLを囲って代入する。

var REPLACE_HTML_STRING = `<a id="replace_a_tag" href="//test.html" target="_top" style="opacity:1; background-image:url({img_src});"></a>`

・正規表現を使って、{img_src}を探しだして、置換処理をする

var regExp = new RegExp('{img_src}', 'g');
var temp_html = '';
var img_src = '//element_1/element_2/test.png';
temp_html = REPLACE_HTML_STRING.replace(regExp, img_src);
（任意のtargetに対して）.innerHTML = temp_html;

・上記実装済みのテストページを確認すると、background-imageのURLの「／」スラッシュが消えた状態になり、画像が表示されない

Answer 1

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/63vkh79c/

テストしてみましたが、消えません。何か別のコードなどに影響されていたりしませんか？

---

追記：

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/ky8p42fg/

---

追記2：

''の中に""があり、それが二重になってたからそこの解釈がブラウザでぶれてそうなったと見た。

var a = '<a href="" style="background: url("//example.com/a.png")">a</a>';
```↓
```JavaScript
var a = '<a href="" style="background: url(`//example.com/a.png`)">a</a>';

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/0uz0m075/

上記のようにバッククオートで記述するか、下記のように連結するかどちらかですね。

'<a href="" style="background: url(' + "'//example.com/a.png'" + ')">a</a>';

Comments

[y_natsui]

ご回答ありがとうございます。
console.log(temp_html);これを出力した際は自分の方でも消えないことはこちらでも確認済みでございます。temp_htmlの状態ではなく、最終的なアウトプットの結果を知りたいと思っております。

jQuery( '.tg' ).text( temp_html );
に関してjQueryの.text()を使用しておりますが、純粋なJSで書いた際の状態をお試しいただくことは可能でしょうか？

個人的には最後の代入する処理の所で、innerHTMLで処理するのか、それともinnerTextで処理するのかで挙動が違ってくるのかなと、思っていたりするのですがいかがでしょうか？

[kei344]

追記しました。

[flat]

To: y_natsui
横から失礼致します。
ダブルスラッシュ(//)を先頭に加えている理由(意図)を聞きしても良いでしょうか？

ちなみに私もコードを試してみましたが、最終的な出力においてスラッシュは消えませんでした。

[kei344]

To: flatさん
プロトコル（スキーム）を省略した記法かと思います。

【リンクの`http:`や`https:`を省略して現在のプロトコルでリンク先にアクセスさせる - Qiita】
http://qiita.com/arai-wa/items/d9b73539898d658b58c5

[y_natsui]

>>flatさん
ダブルスラッシュはhttpとhttps両方に対応する為のものですね。こうすると環境に応じて、httpとhttpsが置き換わって処理されるはずです。

なるほどー。確かに頂いたテストページだと消えませんね。
もう少し他に原因が無いかこちらでも探ってみます。

[kei344]

スラッシュだけ消える場合はちょっとわかりませんが、innerHTMLに空要素（<a></a>など）を代入しても反映されない挙動は想定できます。

[flat]

やはりプロトコル(スキーム)の省略ですよね。
初めて知りましたが、相対URLのような書き方でも機能するのですね。

[y_natsui]

これが実際のコードなのですが、以下の通りバグってしまうんですよね。

temp_htmlに代入するまでは正常に表示されているみたいなのですが、
target.innerHTML = temp_htmlをすると、下記の様になってしまうみたいです。

<a href="http://www.yahoo.co.jp/rd?ep=dxEMLiBN4hiGyDX1UOEn_hrxo.0GUUMlOR4RIrAaFEN…1&r=10&rfm=2&sfid=107531&skwid=0&tlid=0&u=_OTHER_&yads_ds=31531_107587&v=2" target="_top" style="opacity:1; background-image:url("//im.c.yimg.jp/res/imstorage-prod-1001135369/images/15/58636c359093283e35b19ad63e2c1aef.jpg");"></a>
↓
<a href="http://www.yahoo.co.jp/rd?ep=dxEMLiBN4hiGyDX1UOEn_hrxo.0GUUMlOR4RIrAaFEN…7531&amp;skwid=0&amp;tlid=0&amp;u=_OTHER_&amp;yads_ds=31531_107587&amp;v=2" target="_top" style="opacity:1; background-image:url(" im.c.yimg.jp="" res="" imstorage-prod-1001135369="" images="" 15="" 58636c359093283e35b19ad63e2c1aef.jpg");"=""></a>

エスケープ周りの問題ですかね。。。

[kei344]

×「&」が「&amp;」に変換されているので、多分どこかで別の処理を挟んでますね。
訂正：再現しました。
https://jsfiddle.net/ad0swpLu/

[kei344]

わかったー！

[y_natsui]

本当ですか！？
どの辺りが問題の可能性が高そうでしょうか？

[kei344]

すいません、追記してあります。

[y_natsui]

追記ありがとうございます。試してみます！

[y_natsui]

ダブルクォートが問題でした。ありがとうございます。
助かりました！

[kei344]

いえいえ、解決できてよかったです。ひとまずお疲れ様でした。

Answer 2

気休めですが…
{img_src} をもっと単純な文字列にしてみてはいかがでしょうか?

Comments

[y_natsui]

現状で、{img_src}は直接の原因ではないと考えております。

上記のサンプルではbackground-imageのみの場合で、単純化しておりますが実際にはaタグのhrefの箇所であったりも{a_tag_html}などの様に実装していても適切に置換処理が行えていたので、何故最終的なアウトプットでbackground-imageだけがスラッシュが消えてしまうのかその理由が知りたいと思っている次第でございます。