HTML 属性值中是否允许使用单引号/双引号？答案

【问题标题】：Are single/double quotes allowed inside HTML attribute values?HTML 属性值中是否允许使用单引号/双引号？
【发布时间】：2011-04-29 03:22:18
【问题描述】：

我正在尝试设置包含单引号的属性值：

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

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用双引号作为属性分隔符：

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

【讨论】：

【解决方案3】：

您可以在双引号内使用单引号或在单引号内使用双引号。如果要在单引号内使用单引号或在双引号内使用双引号，则必须对它们进行 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" />

【讨论】：

带反斜杠的那个不起作用。那是 JavaScript 转义，而不是 HTML。
你说得对，我编辑了我的回复并删除了转义。
您只是忘记了<label attr="And this is &quot;OK&quot;, too /> 中的结尾"，还是我错了？

【解决方案4】：

是的，属性值中允许使用两个引号，但您必须对用作属性值分隔符的引号以及其他 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'})
);

【讨论】：

非常感谢您的详细解答！只是为了好奇encodeHTML 的实现：它可以使用replace 函数来实现，对吧？是不是效果更差？
它可以，当然，replace(/&/g, '&amp;')...。在这种情况下，这并不重要，因为搜索字符串不能包含任何正则表达式特殊字符，但通常对于普通字符串替换 split/join 可以更简单，因为您可以使用搜索字符串而不必担心正则表达式转义。比较性能因浏览器而异。
谢谢！你能给我一个指向“构造快捷方式”教程的指针吗？
作为@bobince 的一个例子，你不应该从 HTML 字符串中破解文档：反引号字符 ``（不包含在 encodeHTML 函数中）可用于逃离 IE 中的 unquoted attribute value。因此，根据“HTML5”，在属性值中使用反引号字符是无效的。
非常感谢您的解决方案。 :)