如何在HTML中转义JavaScript代码

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

Answer 2

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 3

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 4

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

Answer 5

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

Answer 6

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.