Are single/double quotes allowed inside HTML attribute values?

Question

I'm trying to set attribute value that contains a single quote:

var attr_value = "It's not working";
var html = "<label my_attr='" + attr_value + "'>Text</label>";
$('body').html(html);

However, I get the following result:

<label working="" not="" s="" my_attr="It">Text</label>

How could I fix this ?

Are double quotes allowed inside attribute values ?

score 26 · Accepted Answer · answered Oct 22 '10 at 12:20

26

Yes, both quotes are allowed in attribute values, but you must HTML-escape the quote you're using as an attribute value delimiter, as well as other HTML-special characters like < and &:

function encodeHTML(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;').split("'").join('&#39;');
}

var html= '<label my_attr="'+encodeHTML(attr_value)+'">Text</label>';

However, you are usually much better off not trying to hack a document together from HTML strings. You risk bugs and HTML-injection (leading to cross-site-scripting security holes) every time you forget to escape. Instead, use DOM-style methods like attr(), text() and the construction shortcut:

$('body').append(
    $('<label>', {my_attr: attr_value, text: 'Text'})
);

answered Oct 22 '10 at 12:20

bobince

528,062
107
651
834

Thanks a lot for a detailed answer! Just for curiosity regarding the implementation of `encodeHTML`: It can be implemented using the `replace` function, right ? Is it less effective ? – Misha Moroshko Oct 22 '10 at 12:36
It can, sure, `replace(/&/g, '&')...`. In this case it doesn't matter since the search strings can't contain any regex-special characters, but in general for plain string-replace `split`/`join` can be simpler, since you can use search strings without have to worry about regex-escaping. Comparative performance varies across browsers. – bobince Oct 22 '10 at 12:57
Thanks ! Could you give me a pointer to "construction shortcut" tutorial ? – Misha Moroshko Oct 22 '10 at 13:34
As an example of @bobince’s point that you shouldn’t hack a document together from HTML strings: the backtick character ``` (which is not included in the `encodeHTML` function) can be used to escape from an [unquoted attribute value](http://mathiasbynens.be/notes/unquoted-attribute-values) in IE. For this reason, it has been made invalid to use the backtick character in an attribute value as per “HTML5”. – Mathias Bynens May 31 '12 at 10:21

CodeTwice · Answer 2 · 2015-06-10T14:22:40.007

25

You can use single quotes inside double quotes or double quotes inside single quotes. If you want to use single quotes inside single quotes or double quotes inside double quotes, you have to HTML encode them.

Valid markup:

<label attr="This 'works'!" />
<label attr='This "works" too' />
<label attr="This does NOT \"work\"" />
<label attr="And this is &quot;OK&quot;, too" />

edited Jun 10 '15 at 14:22

answered Oct 22 '10 at 12:18

CodeTwice

2,926
3
18
18

4

The one with the backslashes doesn't work. That's a JavaScript escape, not HTML. – bobince Oct 22 '10 at 12:21
3

You are right, I edited my response and removed the escaping. – CodeTwice Oct 22 '10 at 13:55
2

You just forgot the closing `"` in ` – yckart May 29 '15 at 01:25

score 4 · Answer 3 · answered Oct 22 '10 at 12:16

4

Use double-quotes as the attribute delimiter:

var html = "<label my_attr=\"" + attr_value + "\">Text</label>";

answered Oct 22 '10 at 12:16

Marcelo Cantos

181,030
38
327
365

score 3 · Answer 4 · answered Oct 22 '10 at 12:15

3

var attr_value = "It&#39;s not working"

answered Oct 22 '10 at 12:15

Marco Mariani

13,556
6
39
55

Are single/double quotes allowed inside HTML attribute values?

4 Answers4

Linked

Related