jQuery $().html escapes &-sign

Question

var alt = json_data['alt']; // some text
var url = json_data['url']; // some url

var img_url = '<img src=\'/' + url + '?h=100&w=100\' alt=\'' + alt + '\'>';
$('#imagepreview').html(img_url); // translates to <img src="/some_url?h=100&amp;w=100" alt="some_text">

Why does this happen and how can I prevent this?

Actually this is good as it produces valid HTML. ampersands must be escaped like this in urls for the HTML code to be valid. So I see no problem here, it should be working. — acme, Jun 01 '12 at 13:48
http://stackoverflow.com/questions/355043/how-do-i-escape-an-ampersand-in-a-javascript-string-so-that-the-page-will-valida — davids, Jun 01 '12 at 13:54

score 4 · Answer 1 · answered Jun 01 '12 at 13:49

4

& is actually the valid URL, not &

answered Jun 01 '12 at 13:49

Tallboy

12,847
13
82
173

2

Ok, but in this example I want the & not the & – Cas van Noort Jun 01 '12 at 13:51

score 1 · Answer 2 · answered Jun 01 '12 at 13:51

1

I personally don't see that happen, but nevertheless you should do it this way:

var img = $('<img />', {
    src: '/' + url + '?h=100&w=100',
    alt: alt
}).appendTo('#imagepreview');

That makes sure any escaping is done properly, such as the alt attribute!

answered Jun 01 '12 at 13:51

Ja͢ck

170,779
38
263
309

This translates to – Cas van Noort Jun 01 '12 at 13:57
@CasvanNoort I think the way you have determined that is not the same for every browser; why should the url not have `&`? – Ja͢ck Jun 01 '12 at 13:59
@CasvanNoort have you tried this: `console.log($('#imagepreview img').attr('src'));` – Ja͢ck Jun 01 '12 at 14:01

score 0 · Answer 3 · answered Jun 01 '12 at 14:11

0

You must use \u0026 instead of &

answered Jun 01 '12 at 14:11

Cas van Noort

255
3
9

jQuery $().html escapes &-sign

3 Answers3