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

Question

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

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

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

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

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

Допускаются ли двойные кавычки внутри значений атрибутов?

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

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

Answer 3

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

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

Answer 4

var attr_value = "It's not working"