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

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

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>

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

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


html quotes
person Misha Moroshko    schedule 22.10.2010    source источник

Ответы (3)


arrow_upward
25
arrow_downward

Да, обе кавычки допускаются в значениях атрибутов, но вы должны экранировать в 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'})
);
person bobince    schedule 22.10.2010
comment
Большое спасибо за подробный ответ! Просто из любопытства относительно реализации encodeHTML: это можно реализовать с помощью функции replace, верно? Он менее эффективен? - person Misha Moroshko; 22.10.2010
comment
Можно, конечно, replace(/&/g, '&amp;').... В этом случае это не имеет значения, так как строки поиска не могут содержать никаких специальных символов регулярных выражений, но в целом для простой замены строки split/join может быть проще, поскольку вы можете использовать строки поиска, не беспокоясь о регулярных выражениях. побег. Сравнительная производительность варьируется в зависимости от браузера. - person bobince; 22.10.2010
comment
Спасибо ! Не могли бы вы дать мне указатель на учебник по строительству? - person Misha Moroshko; 22.10.2010
comment
В качестве примера утверждения @bobince о том, что вам не следует собирать документ из строк HTML: символ обратной кавычки ``` (который не включен в функцию encodeHTML) можно использовать для выхода из значение атрибута без кавычек в IE. По этой причине было сделано недопустимым использование символа обратной кавычки в значении атрибута в соответствии с «HTML5». - person Mathias Bynens; 31.05.2012
comment
Большое спасибо за решение. :) - person Ravi Dhoriya ツ; 09.07.2014

arrow_upward
19
arrow_downward

Вы можете использовать одинарные кавычки внутри двойных кавычек или двойные кавычки внутри одинарных кавычек. Если вы хотите использовать одинарные кавычки внутри одинарных кавычек или двойные кавычки внутри двойных кавычек, вы должны закодировать их в 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" />
person CodeTwice    schedule 22.10.2010
comment
Тот, что с обратной косой чертой, не работает. Это выход из JavaScript, а не HTML. - person bobince; 22.10.2010
comment
Вы правы, я отредактировал свой ответ и удалил экранирование. - person CodeTwice; 22.10.2010
comment
Вы просто забыли закрывающую " в <label attr="And this is &quot;OK&quot;, too />, или я ошибаюсь? - person yckart; 29.05.2015

arrow_upward
4
arrow_downward

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

var html = "<label my_attr=\"" + attr_value + "\">Text</label>";
person Marcelo Cantos    schedule 22.10.2010