Question

I have some addHtml JavaScript function in my JS code. I wonder how to escape HTML/JS code properly. Basically, what I am trying right now is:

addHtml("<a onclick=\"alert(\\\"Hello from JS\\\")\">click me</a>")

However, that doesn’t work. It adds the a element but it doesn’t do anything when I click it.

I don’t want to replace all " by ' as a workaround. (If I do, it works.)

Answer 1

I wonder how to escape HTML/JS code properly.

To insert string content into an HTML event handler attribute:

(1) Encode it as a JavaScript string literal:

alert("Hello \"world\"");

(2) Encode the complete JavaScript statement as HTML:

<a onclick="alert(&quot;Hello \&quot;world\&quot;&quot;">foo</a>

And since you seem to be including that HTML inside a JavaScript string literal again, you have to JS-encode it again:

html= "<a onclick=\"alert(&quot;Hello \\&quot;world\\&quot;&quot;\">foo<\/a>";

Notice the double-backslashes and also the <\/, which is necessary to avoid a </ sequence in a <script> block, which would otherwise be invalid and might break.

You can make this less bad for yourself by mixing single and double quotes to cut down on the amount of double-escaping going on, but you can’t solve it for the general case; there are many other characters that will cause problems.

All this escaping horror is another good reason to avoid inline event handler attributes. Slinging strings full of HTML around sucks. Use DOM-style methods, assigning event handlers directly from JavaScript instead:

var a= document.createElement('a');
a.onclick= function() {
    alert('Hello from normal JS with no extra escaping!');
};