SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member Xandros's Avatar
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Double and single quotes in JS inside HTML attributes

    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 :

    Code:
    <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 :

    Code:
    <button onclick="DoSomething('str\"ing')">
    If you replace the double quote by '&quot;' then you don't get a double quote inside DoSomething (you could always replace &quot; 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 &apos; and &quot; and then replacing them back inside DoSomething ?

    Thanks !

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're happy with onclick attributes, then how about your own custom attributes?
    Code:
    <input type="button" value="Click Me" myAttr='Hi"There' onclick="doThis(this.getAttribute('myAttr'));" />

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh. Yep. That\'s easier. Don\'t use custom attributes!

  5. #5
    SitePoint Member Xandros's Avatar
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ...

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Xandros View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Member Xandros's Avatar
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you just escape the double quotes to &quot; and replace &quot; back by " inside the called JS function, you can actually allow the contents of the custom HTML attribute to have single AND double quotes.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Xandros View Post
    Well, if you just escape the double quotes to &quot; and replace &quot; 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 &quot; 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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Member Xandros's Avatar
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &quot; but since it is output inside a custom html attribute ...


    Quote Originally Posted by felgall View Post
    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 &quot; 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.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Xandros View Post
    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 &quot; 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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •