jQuery html() converting braces to html entities (sometimes)

Question

Basically:

I have this HTML:

<div id="foo"><img src="/foo/bar/{var}/foo" alt="{var}"></div>

When calling (using jQuery in Firefox):

$("#foo").html()

I get:

<img src="/foo/bar/%7Bvar%7D/foo" alt="{var}">

My desired output is:

<img src="/foo/bar/{var}/foo" alt="{var}">

What's going on here? Any tips for how to resolve this?

I guess I'd be surprised if the solution was to use regex to undo the HTML entities conversion. Using parens instead of braces seems to cause the same result (with different HTML entities).

Edit: I tried this using square brackets ([ and ]), and unlike parens and braces the brackets are not converted to HTML entities. Do parens and braces have some special meaning here?

Answer 1

You could probably use the javascript unescape function http://www.w3schools.com/jsref/jsref%5Funescape.asp

Answer 2

Have you tried using { for { and } for } in your HTML? That should prevent the curly braces from being interpreted by Javascript.

Answer 3

I'm experiencing this same issue as well. And oddly enough, the only time the braces are encoded are when they're being replaced within an <img />'s "src" attribute. For what reasons, I've no idea. Look at the following:

<img src="{@url}" alt="{@title}" />

That, of course, ended up looking like this:

<img src="%7B@url%7D" alt="{@title}" />

Funnily enough, if I tried changing the names of the attributes in question, take a look at the output:

<img src="" notsrc="{@url}" alt="{@title}" />

The mystery remains that it was only affecting the src="" attribute... How it could make an exception for this has me completely baffled.