7

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!

seanlevan
  • 1,367
  • 3
  • 15
  • 33
  • 1
    Don't bind your handlers this way and you can avoid the problem altogether! – Evan Davis Jul 15 '13 at 18:26
  • In your question you already have the apostrophe escaped with a backslash, that doesn't work? – Ajedi32 Jul 15 '13 at 18:27
  • tell me one good reason why you need to bind it in single quotes. – HIRA THAKUR Jul 15 '13 at 18:28
  • http://stackoverflow.com/questions/12182121/escaping-javascript-string-in-java may help regarding escaping string literals to pass into JavaScript. –  Jul 15 '13 at 18:28
  • `'` = `'` you're escaping HTML not javascript, atleast I'm assuming you are. – Iron3eagle Jul 15 '13 at 18:28
  • I don't understand ? @MESSIAH It won't work if you have quotes within quotes! – seanlevan Jul 15 '13 at 18:29
  • I would use the data attributes on your element and just do something like `` – Ronnie Jul 15 '13 at 18:30
  • @dfdf You said you're using php so can you use the built in `htmlspecialchars` function to change the entities for you? http://php.net/manual/en/function.htmlspecialchars.php – Iron3eagle Jul 15 '13 at 18:35
  • 1
    An alternative - you could use a proper apostrophe rather than the bastard typewriter apostrophe. `onclick="sharemusic('Say It Ain’t So', 'Weezer');"` would work fine. ;-) – JimmiTh Jul 15 '13 at 18:54
  • Kinda dumb solution, but totally affective for what I'm trying to do. Wow, this actually kinda works @JimmiTh – seanlevan Jul 15 '13 at 23:42
  • possible duplicate of [Escape apostrophe when passing parameter in onclick event](http://stackoverflow.com/questions/2846044/escape-apostrophe-when-passing-parameter-in-onclick-event) – Dancrumb Jul 15 '13 at 23:46
  • BTW doesn't wordpress do something like that? @JimmiTh – seanlevan Jul 15 '13 at 23:48
  • Yeah, WordPress has plugins like wp-Typography that do a lot of fixing-up in terms of typography. There are also plugins and libraries (see e.g. smartypants, typogrify) for most other languages and platforms. But yeah, it's not an *actual* (generalized) solution, although in your simple example, I actually think it's the *proper* way. ;-) – JimmiTh Jul 16 '13 at 07:43
  • Funny. It works perfectly for what I want to do! @JimmiTh wanna post it as an answer? – seanlevan Jul 16 '13 at 18:39

6 Answers6

12

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.

JimmiTh
  • 7,389
  • 3
  • 34
  • 50
  • As I said in the comments, this answer is awesome. Yeah, I know this isn't the best method, but it works 100% for what I'm trying to do. Thanks, bud :) – seanlevan Jul 16 '13 at 19:34
6

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.

Community
  • 1
  • 1
Paul S.
  • 64,864
  • 9
  • 122
  • 138
2

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)

BenLanc
  • 2,344
  • 1
  • 19
  • 24
2

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

talemyn
  • 7,822
  • 4
  • 31
  • 52
1

Use the following HTML entity.

onclick='sharemusic("Say It Ain't So", "Weezer");'
matt3141
  • 4,303
  • 1
  • 19
  • 24
1

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');"
Cobra_Fast
  • 15,671
  • 8
  • 57
  • 102
  • Although I also prefer double quotes for attributes, the standard doesn't describe it. All specs and recommendations for HTML, XHTML, and XML allow single quotes. – JimmiTh Jul 15 '13 at 18:54