Escaping HTML Character Entities in Javascript - ''' and '''
This blog has become a chronicle of wierdo bugs, so here's a new one to me. Maybe its not even a bug; but its annoying. I always thought that encoding HTML character entities in Javascript was a no-brainer until we ran across this bug tonight when launching a French version of a Yahoo! property. French language contains lots of apostrophe's (je t'aime, ce n'est pas, etc) and much to our dismay the HTML character entities for apostrophes, both ' and ' both seem to be automagically parsed as apostrophes and not special characters by Javascript, so instead of pulling out your hair trying to figure out why your code is broken, just escape the HTML entities like any other apostrophe would be. You can see for yourself with this little test right here. The first one is the escaped version... Second is not escaped and produces the error. You can do a view source if you don't believe me!
posted by cyclona23 at 6:10 PM
3 Comments:
You mention:
automagically parsed as apostrophes and not special characters by Javascript
It seems that the parsing is done by the html parser not the javascript parser. If you put the second example in a function in a <script> tag, it does work. It seems that the html parser is "smart" enough to not unescape (or translate) html escape sequences that are inside of script tags.
So, it seems that if you are creating javascript in an html attribute (e.g. <div onclick="something();">) then perform a javascript escape followed by an html escape. If you have javascript in a script file or script tag, then just perform a javascript escape.
Related to this, I have found that when specifying form values in html make sure to html escape. When dynamically setting them from a script tag just apply a javascript escape.
InnerHTML allows for regular HTML entities, but other methods, such as alerts or creating text nodes will not parse the character. The solution is to use the hex value of the numeric character entity preceded by "\u". Octal value preceded by "\" works for the first few hundred characters . There's a Javascript entity conversion calculator at http://www.evotech.net/blog/category/entities/
Thanks for this! I was changing the window status bar to a string with had an apostrophy in it which was breaking all my javascript. Found your blog and fixed it right up, :).
Post a Comment
<< Home