CODEWITHSUNDEEP
htmlquotes
Misha Moroshko
Misha Moroshko

Reputation: 171479

Are single/double quotes allowed inside HTML attribute values?

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 ?

Upvotes: 25

Views: 25050

Answers (4)

CodeTwice
CodeTwice

Reputation: 2936

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" />

Upvotes: 26

bobince
bobince

Reputation: 536735

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'})
);

Upvotes: 27

Marcelo Cantos
Marcelo Cantos

Reputation: 186098

Use double-quotes as the attribute delimiter:

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

Upvotes: 4

Marco Mariani
Marco Mariani

Reputation: 13776

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

Upvotes: 3

Related Questions