CODEWITHSUNDEEP
javascripthtml
seanlevan
seanlevan

Reputation: 1415

Escaping apostrophe

I have this simple script: onclick='sharemusic("Say It Ain't So", "Weezer");'

Because of the apostrophe on "Ain't" it isn't working properly. How do I escape the apostrophe without affecting the code's functionality?

Thanks a heap!

Upvotes: 7

Views: 12460

Answers (6)

JimmiTh
JimmiTh

Reputation: 7449

I was reluctant to add this answer, because all the others are good and will be more useful to most people - by answering the underlying question: "How to escape in Javascript inside HTML attributes" - this won't answer that.

Some will consider the following a workaround, others will look at it as the only proper solution™.

Get rid of the typewriter apostrophe - although typewriters are cool and fashionable in all their retro grandeur, we can do better than that and go even older: Back to the proper, one-size-fits-one, typographic apostrophe (AKA "the curly apostrophe").

As a side effect, this will also fix the escaping problem:

onclick="sharemusic('Say It Ain’t So', 'Weezer');"

The typographers will be happy, and the browser will be happy. Well, as long as you're using UTF-8 like you should - or some other encoding that includes the typographic apostrophe. Unicode: U+2019, entity: ’ or ’ (yes, it shares its codepoint with the right single quotation mark - but it's still the "proper" apostrophe).

As mentioned in the comments, there are various libraries and CMS/blog plugins that help dealing with conversion to proper typographic symbols (and other typographic niceties). See wp-Typography, smartypants (which was, I think, the first implementation of something like this - developed by John Gruber, the original author of Markdown), typogrify etc.

I'm not sure what, if any, more recent alternatives there are, since I long ago made my own (non-public, I must admit) C# implementation.

Upvotes: 13

talemyn
talemyn

Reputation: 7940

These are all really good answers that depend, almost entirely on the circumstances of your code.

If its a one off, where the values are hard-coded and are never going to be used outside of the page, then, Cobra_Fast's solution is the quickest and easiest.

If your data is being fed in from an external or dynamic source, but will only ever be used for HTML display, then matt3141's solution is probably best for the circumstances (i.e., store the data so that it is ready to display on the page.

If your data is coming from an external source and being used both for HTML presentation, as well as use in external systems, Paul S. answer is by far the most portable, since HTML are intended for HTML use only, and would likely need to be translated for external systems . . . Unicode, on the other hand, has much wider support across technologies.

Also, as Paul S. alludes to . . . any additional "pre-processing" of the JS values on the page may result in the need to add additional levels of encoding . . . for example, " becoming " or 'Say It Ain\'t So' becoming 'Say It Ain\\'t So' (or even 'Say It Ain\\\\'t So', if things are really intricate).

Upvotes: 2

Cobra_Fast
Cobra_Fast

Reputation: 16061

First, use double quotes for the attribute as the standard describes.

Second put your JS strings in single quotes and escape extra single quotes with a backslash.

onclick="sharemusic('Say It Ain\'t So', 'Weezer');"

Upvotes: 1

Paul S.
Paul S.

Reputation: 66304

If you absolutely must escape it for JavaScript, not a HTML-entity, you can write it in it's Unicode representation

"\u0027" // "'"
"Say It Ain\u0027t So" // "Say It Ain't So"

You can work out what the unicode representation is by

"'".charCodeAt(0) // 39
   .toString(16)  // "27"
// So pad 27 to 4 digits, then prepend \u

It is always best to use a HTML entity as suggested in MrJammin's answer when using HTML, because it is in HTML, or moving it entirely out of the HTML. Otherwise you'll need to escape everything that could possibly cause issues, e.g. all instances of & to \u0026, rather than simply doing a much more readable & and the same with other quote styles.

Upvotes: 6

matt3141
matt3141

Reputation: 4423

Use the following HTML entity.

onclick='sharemusic("Say It Ain't So", "Weezer");'

Upvotes: 1

BenLanc
BenLanc

Reputation: 2434

You'd need to use HTML entities, e.g.:

onclick="sharemusic("Say It Ain't So", "Weezer");"

But as others have said, you probably shouldn't be binding click events this way (abstract your JS in to its own file and use addEventHandler)

Upvotes: 2

Related Questions