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

I'm trying to set attribute value that contains a single quote:

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

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

However, I get the following result:

但是,我得到以下结果:

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

How could I fix this ?

我怎么能解决这个问题?

Are double quotes allowed inside attribute values ?

属性值中是否允许使用双引号?

4 个解决方案

#1

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 &:

是的,属性值中允许使用两个引号,但您必须将您正在使用的引用作为属性值分隔符进行HTML转义,以及其他HTML特殊字符(如 <和&):< p>

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

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:

但是,如果不尝试从HTML字符串中一起破解文档,通常会更好。每次忘记逃避时,都会冒错误和HTML注入(导致跨站点脚本安全漏洞)。相反,使用DOM样式的方法,如attr(),text()和构造快捷方式:

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

#2

You can use single quotes inside double quotes or double quotes inside single quotes. If you want to use single quotes inside single quotes or double quotes inside double quotes, you have to HTML encode them.

您可以在双引号内使用单引号或在单引号内使用双引号。如果要在单引号内使用单引号或在双引号内使用双引号,则必须对它们进行HTML编码。

Valid markup:

<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

Use double-quotes as the attribute delimiter:

使用双引号作为属性定界符:

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

#1