No illegal characters. No single quotes. No double quotes. But escaping still needed

Question

I would imagine that all of these would work. But only 4 work. The others produce "missing )" errors.

All the "code checkers" I've run them through, claim "no errors at all". None of the string literals contain any single or double quotes at all.

What is the secret way to escape ALL text to avoid ALL errors.

  <div onclick='alert("Bob&apos;s" );'> 1 works </div> <div onclick="alert('Fred&apos;s' );"> 2 fails </div> <div onclick='alert("Say &quot; hi &quot;");'> 3 fails </div> <div onclick="alert('Say &quot; hi &quot;');"> 4 works </div> <div onclick='alert("Bob&#39;s" );'> 5 works </div> <div onclick="alert('Bob&#39;s' );"> 6 fails </div> <div onclick='alert("Say &#34; hi &#34;" );'> 7 fails </div> <div onclick="alert('Say &#34; hi &#34;' );"> 8 works </div> 

Answer 1

The HTML entities are translated to their corresponding characters before passing the string to Javascript. They only escape the characters at the HTML level, not the Javascript level.

So the second one tries to execute the Javascript:

alert('Fred's');

which has improperly nested quotes. You need to include the Javascript escape sequence to protect the quote:

<div onclick="alert('Fred\&apos;s'         );">

This will execute Javascript:

alert('Fred\'s');

which is valid.

If you're looking for a general way to generate code that will always be escaped properly, without having to parse it in detail, I don't think there is one. The best solution is not to put Javascript into HTML attributes in the first place, but us unobtrusive Javascript.

<div id="fredalert">

<script>
document.querySelector("#fredalert").addEventListener("click", function() {
    alert('Fred\'s');
});
</script>

Answer 2

" , ' , " and ' are not part of JavaScript. HTML parser will convert them if it encounters them inside HTML; so your code effectively reads:

alert("Bob's"           );
alert('Fred's'          );
alert("Say " hi ""      );
alert('Say " hi "'      );
alert("Bob's"           );
alert('Bob's'           );
alert("Say " hi ""      );
alert('Say " hi "'      );

which works, or fails, for the predictable reasons.

As comments started saying, it is best not to mix JavaScript and HTML; use external script, and attach things to DOM dynamically (for example, with document.addEventListener ). If you absolutely need to have JavaScript inside a HTML attribute (though I've never encountered such a need, nor can I imagine why I would), you can escape the quotes using the backslash, like you normally would:

alert('Bob\'s');

EDIT: If you already have code that needs to be fixed, the easiest way to do that is to ensure that JavaScript is correct; then if such JavaScript is to be placed inside a HTML attribute, to convert the quotes that match the quotes of the attribute into entities. (It won't hurt though if you go overboard and just convert both kinds of quotes.) So, let's say you want to alert "Hi", said Bob's uncle . To make this into a string, you would need to backslash-escape at least one of those quotes (or use template literals). So you get "\\"Hi\\", said Bob's uncle" as a valid JS string. Then if you're going to place it inside onclick="" , you make double quotes (or all quotes) into entities (which you can do , for this final result:

onclick=""\"Hi\", said Bob's uncle""

This is a process that is fairly easy to automate, and will leave you with correct JavaScript, assuming you started with correct JavaScript in the first place.