Double and single quotes in JS inside HTML attributes

[Xandros]

Hi all,

here’s the issue, but first a foreword.

I know that using <a href=“javascript:”> and <sometag onclick=“”> is evil, but in this particular situation it is quite hard to avoid it due to external powers

Anyway here is the issue itself : putting javascript strings inside HTML attributes :

<button onclick="DoSomething('string')">

Everything is fine until there are single or double quotes INSIDE the ‘string’ value. Having a double quote inside the string, even JS escaped leads to the onclick argument value being cut :

<button onclick=[COLOR="Red"]"DoSomething('str\\"[/COLOR]ing')">

If you replace the double quote by ‘"’ then you don’t get a double quote inside DoSomething (you could always replace " by " in JS).

Similar problem if you choose to enclose the onclick argument in single quotes and happen to have a single quote JS escaped inside the string.

So, is there any other way of dealing with potential presence of single AND double quotes in the ‘string’ value, other than replacing them before by ' and " and then replacing them back inside DoSomething ?

Thanks !

[r51]

If you’re happy with onclick attributes, then how about your own custom attributes?

<input type="button" value="Click Me" myAttr='Hi"There' onclick="doThis(this.getAttribute('myAttr'));" />

[felgall]

The simplest solution is to take the JavaScript out of the HTML and put it in a separate file where it belongs.

Also you should never use <a href=“javascript:”> since 9 times out of 10 the JavaScript will not work correctly and 10 times out of 10 you are attacking those without JavaScript by really stuffing them up.

If you really can’t spare the couple of minutes to do that then what you need to use is:

<button onclick=‘DoSomething("str\“ing”)’>

You can’t use the same quote in both HTML and JavaScript when you jumble them together because then the escape doesn’t work because it needs the way you need to escape it for HTML is invalid JavaScript and the JavaScript escape is invalid HTML.

[r51]

Oh. Yep. That\'s easier. Don\'t use custom attributes!

[Xandros]

Ok thanks to everyone, but the only thing I can do in the context of where it is, is what r51 suggested (I actually implemented this right after my post)…

Yes, in a website it’s no good to use onclick= or href="javascript and custom html attributes, and its better to have the JS in another file. But there are places and reasons that make you do those things, and I have one of those here (its not even a website).

Thanks to felgall too but I think you missed the fact that when using your example, then the inside string cannot have single quotes… Which it can have sometimes too …

Anyway, thanks to you all for your replies ! The most versatile way with the restrictions that apply is to use a custom html attribute indeed …

[felgall]

@Xandros

Thanks to felgall too but I think you missed the fact that when using your example, then the inside string cannot have single quotes… Which it can have sometimes too …

As I said - you can’t use the same quotes in both HTML and JavaScript when jumbling them together. That means no JavaScript single quotes inside HTML single quotes and no JavaScript double quotes inside HTML double quotes.

[Xandros]

Well, if you just escape the double quotes to " and replace " back by " inside the called JS function, you can actually allow the contents of the custom HTML attribute to have single AND double quotes.

[felgall]

@Xandros

Well, if you just escape the double quotes to " and replace " back by " inside the called JS function, you can actually allow the contents of the custom HTML attribute to have single AND double quotes.

That assumes that the JavaScript is going to be output as HTML. If the JavaScript text were being used for something else then converting " to " is not an appropriate conversion since those two are only equivalent in HTML.

The simple solution is to not mix JavaScript and HTML in the same file as it is completely unnecessary and just makes things more complicated when they clash.

[Xandros]

As I stated in the very first message, i’m aware of this, and the best practice rules for JS and whatnot cannot be applied in every environment because there are some other reasons to sometimes do otherwise. anyway I do agree about " but since it is output inside a custom html attribute …

@felgall

That assumes that the JavaScript is going to be output as HTML. If the JavaScript text were being used for something else then converting " to " is not an appropriate conversion since those two are only equivalent in HTML.

The simple solution is to not mix JavaScript and HTML in the same file as it is completely unnecessary and just makes things more complicated when they clash.

[felgall]

@Xandros

As I stated in the very first message, i’m aware of this, and the best practice rules for JS and whatnot cannot be applied in every environment because there are some other reasons to sometimes do otherwise. anyway I do agree about " but since it is output inside a custom html attribute …

Other visiitors to the forum may find this thread when they are trying to do something similar. Since their situation may not be identical to yours indicating the problems with the solution that works for you and what the best practice is means that they can do it right if they don’t have the restriction that prevents you doing it properly (presumably the code is on an external site where you can’t upload separate JavaScript).