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.)

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.)

• javascript
• html
• escaping

• 1 Why 3 backslashses? Just put one backslash before each double quote inside your method "\ – Marko Commented Jul 6, 2010 at 19:59
• 1 One wonders why you are using string literals to add an HTML element to the page instead of creating an element in the dom and attaching an event to it? – Darko Commented Jul 6, 2010 at 20:03
• @Marko: Then it would not be valid HTML. – Albert Commented Jul 6, 2010 at 20:03
• @Darko: This is just for testing and I reduced the testcase to put it here on SO. Even if I would solve this particular task in a way where I go around the problem, I would still not have solved the problem itself because I will need it elsewhere. – Albert Commented Jul 6, 2010 at 20:05
• You say it adds the a element. does the onclick get put onto that element with nothing in it? or is the onclick missing all together? – Shaded Commented Jul 6, 2010 at 20:11

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

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.

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.

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

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.

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