Разрешены ли одиночные/двойные кавычки внутри значений атрибутов HTML?

Я пытаюсь установить значение атрибута, содержащее одну цитату:

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

Однако я получаю следующий результат:

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

Как я могу это исправить?

Разрешены ли двойные кавычки внутри значений атрибутов?

Ответ 1

Да, оба кавычки разрешены в значениях атрибутов, но вы должны исключить HTML-код, который вы используете в качестве разделителя значений атрибута, а также другие специальные символы HTML, такие как < и &:

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

Однако вам обычно намного лучше не пытаться взломать документ из строк HTML. Вы рискуете ошибками и HTML-инъекцией (приводящей к сквозным ошибкам в области межсайтового скриптинга) каждый раз, когда вы забываете сбежать. Вместо этого используйте методы типа DOM, такие как attr(), text() и ярлык построения:

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

Ответ 2

Вы можете использовать одинарные кавычки внутри двойных кавычек или двойные кавычки внутри одинарных кавычек. Если вы хотите использовать одинарные кавычки внутри одинарных кавычек или двойных кавычек в двойных кавычках, вы должны их кодировать HTML.

Действительная разметка:

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

Ответ 3

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

Ответ 4

Использовать двойные кавычки как разделитель атрибутов:

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