jQuery URI encode (char &) .html() attribute value

Question

I've read a lot of the HTML encoding post for the last day to solve this. I just managed to locate it. Basicly I have set an attribute on an embed tag with jQuery. It all works fine in the browser. No I want to read the HTML itself to add the result as a value for an input field to let the user copy & past it.

The PROBLEM is that the .html() function (also plain JS .innerHTML) converts the '&' char into '& amp;' (without the space). Using differen html encoder functions doesnt make a difference. I need the '&' char in the embed code.
Here is the code:

HTML:

<div id="preview_small">
<object><embed src="main.swf?XY=xyz&YXX=xyzz"></embed>
</object></div>

jQuery:

$("#preview_small object").clone().html();

returns

... src=main.swf?XY=xyz&YXX=xyzz ...

When I use:

$("#preview_small object").clone().children("embed").attr("src");

returns

main.swf?XY=xyz&YXX=xyzz

Any ideas how I can get the '&' char direct, without using regex after I got the string with .html()

Answer 1

I need the & char in the embed code.

No you don't. This:

<embed src="xyz&YXX=xyz"></embed>

is invalid HTML. It'll work in browsers since they try to fix up mistakes like this, but only as long as the string YXX doesn't happen to match an HTML entity name. You don't want to rely on that.

This:

<embed src="xyz&amp;YXX=xyz"></embed>

is correct, works everywhere, and is the version you should be telling your users to copy and paste.

attr("src") returns xyz&YXX=xyz

Yes, that's the underlying value of that attribute. Attribute values and text content can contain almost any character directly. It's only the HTML serialisation of them where they have to be encoded:

<div title="a&lt;b&quot;&amp;c&gt;d">

$('div').attr('title') -> a<b"&c>d

I want to read the HTML itself to add the result as a value for an input field

<textarea id="foo"></textarea>

$('#foo').val($('#preview_small object').html());

However note that the serialised output of innerHTML/html() is not in any particular fixed dialect of HTML, and in particular IE may give you code that, though generally understandable by browsers, is also not technically valid:

$('#somediv').html('<div title="a/b"></div>');
$('#somediv').html() -> '<DIV title=a/b></DIV>' - missing quotes

So if you know the particular format of HTML you want to present to the user, you may be better off generating it yourself:

function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

var src= 'XY=xyz&YXX=xyzz';
$('#foo').val('<embed src="'+encodeHTML(src)+'"><\/embed>');

(The \/ in the close tag is just so that doesn't get mistaken as the end of a <script> block, in case you're in one.)