how to escape JavaScript code in HTML

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

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

Answer 2

What does the final HTML rendered in the browser look like ? I think the three slashes might be causing an issue .

Answer 3

My solution would be

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

I typically use single quotes in Javascript strings, and double quotes in HTML attributes. I think it's a good rule to follow.

Answer 4

How about this?

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

It worked when I tested in Firefox, at any rate.

Answer 5

The problem is probably this...

As your code is now, it will add this to the HTML

<a onclick="alert("Hello from Javascript")"></a>

This is assuming the escape slashes will all be removed properly.

The problem is that the alert can't handle the " inside it... you'll have to change those quotes to single quotes.

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

That should work for you.

Answer 6

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!');
};