Single and Double Quotes Together as HTML Attribute Value

Single and double quotes together as HTML attribute value?

Is there a way to fix it WITHOUT using HTML entities (Like "), htmlentities() or similar functions?

No, there is not. The double quote (") has special meaning inside a HTML attribute. If you want to put it into an attribute value, you must (this is not a true must but a good rule of thumb. It's a must if you use attributes delimited by double-quotes as you do in your question) write it as its entity ". There is no way around it.

Actually even <tag attr='this"'> is not wrong HTML, too and most browsers can deal with that. However it doesn't help you because you're looking for both quotes - single and double - and one of these always in HTML is a delimiter of the attribute value - if you need spaces inside the attribute value (as you do).

However, do not worry about that. It works, and you can express everything you like with that, including the combination of quotes you have.

And actually PHP is there for you to take the burden of "escaping" all those characters just with the htmlspecialchars method doing all the work for you. Inside a PHP string you have the original text - with single and double quotes as you see fit - verbatim.

$myString = 'She said: "I don\'t know."';
printf('<input type="text" name="myInput" value="%s" />'
       , htmlspecialchars($myString));

Just a shortened example that should demonstrate how this works. Online demo.

Are single/double quotes allowed inside HTML attribute values?

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('&').split('<').join('<').split('"').join('"').split("'").join(''');
}

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

Single vs Double quotes (' vs )

The w3 org said:

By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa. Authors may also use numeric character references to represent double quotes (") and single quotes ('). For double quotes authors can also use the character entity reference ".

So... seems to be no difference. Only depends on your style.

When should I use double or single quotes in JavaScript?

The most likely reason for use of single vs. double in different libraries is programmer preference and/or API consistency. Other than being consistent, use whichever best suits the string.

Using the other type of quote as a literal:

alert('Say "Hello"');
alert("Say 'Hello'");

This can get complicated:

alert("It's \"game\" time.");
alert('It\'s "game" time.');

Another option, new in ECMAScript 6, is template literals which use the backtick character:

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

Template literals offer a clean syntax for: variable interpolation, multi-line strings, and more.

Note that JSON is formally specified to use double quotes, which may be worth considering depending on system requirements.

Javascript Set Attribute With Single Quotation

It is incorrect to say that

by default javascript appends attributes using double quotes.

An attribute is merely a string. The attribute value itself does not include the surrounding quotes. Quotes are nothing more than syntax for representing a string literal. The outside quotes you see surrounding the attribute in

<div data-json="{"foo":"bar"}">

do not exist in the attribute value; they were simply inserted by the console when it is printing out the attribute for your visual convenience. There is nothing "interfering with the JSON". The attribute value can be retrieved and parsed with JSON.parse as is with no further ado.

var json = {"foo":"bar"}
var el = document.getElementById("someElement");
el.setAttribute("data-json", JSON.stringify(json));

// now, parse the attribute
>> JSON.parse(el.getAttribute('data-json'))
<< Object {foo: "bar"}

How can I escape a single quote?

You could use HTML entities:

• ' for '
• " for "
• ...

For more, you can take a look at Character entity references in HTML.

---

Related Topics