Passing in a text to a javascript function that may have a single quote.

Question

I have a link that I dynamically create which looks something like the following:

<a onclick="Edit('value from a text column here')" href="javascript:void(null);">Edit</a>

with the Edit function then taking the passed in value and putting it into a Yahoo Rich Text Editor. This works well except for when there is a single quote in the text being passed. The obvious problem being that the link then looks something like:

<a onclick="Edit('I'm a jelly donut')" href="javascript:void(null);">Edit</a>

Any suggestions on what I can do? I'd rather not stray too far from the structure I am currently using because it is something of a standard (and maybe the standard sucks, but that's another question altogether).

Note: I am using ASP as my server side language.

Answer 1

Convert quote charaters to their HTML equivalents, " etc. before you insert them into the HTML. There's a long list of HTML/XML character codes on wikipedia.

There may well be a function to do this for you, depending on how you're dynamically generating the code: PHP has htmlspecialchars, and though I'm not familiar with ASP etc, I'm sure there are similar routines.

Answer 2

So it seems there was more going on, most of these would probably work under most circumstances, but in the interest of posterity here's what I had to do.

The information being pulled into the Rich Text Editor was in a YUI datatable and I am creating a link using the custom formatter prototype for said control.

The problem with using the "Replace ' with \' " method was that I need to still view the text being displayed in the datatable the same way.

The problem with using the ASP equivalent of htmlspecialchars (Server.HTMLEncode) was that it still had a problem in the javascript that was being generated from the custom formatter function. I don't know why exactly, but I did try it and it didn't work. That answer was closest to the answer that I came up with (and pushed me in the right direction) so I accepted that answer.

What I did instead was used the javascript function 'escape' to pass into my edit function, and then unescape to set the inner HTML for the Rich Text Editor.

Answer 3

Run the text through an escape function to put a \ before the '. If you're generating the link on the server, we would need to know what server-side language you're using to give more specific advice.

If you're generating the tag client-side as a string in javascript (don't do that, use document.createElement), use the String.replace method on the argument string to pick out characters that will break the syntax you're generating and replace them with escaped versions.

Answer 4

You could just replace the ' with \'

Answer 5

I see at least three additional possibilities:

JavaScript Unicode escape

<a onclick="Edit('I\u0027m a jelly donut')" href="javascript:void(null);">Edit</a>

as \u0027 is the javascript espace character for the quote. The others being less practical:

JavaScript function

<script>function getQuote() { return "'" }</script>
<a onclick="Edit('I' + getQuote() + 'm a jelly donut')" href="javascript:void(null);">Edit</a>

and:

JavaScript global variable

<script>var g_strJellyText = "I\u0027m a jelly donut"</script>
<a onclick="Edit(g_strJellyText)" href="javascript:void(null);">Edit</a>

But I believe you already considered theses solution (or their variants, or the HTML entity escape mentionned by Chris Johnson).

Still, it's worth mentioning.