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

我试图设置包含一个单引号的属性值：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>

我怎么能解决这个问题？

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

来源

2010-10-22 Misha Moroshko

是的，无论是报价被允许在属性值，但是你必须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'}) 
);

来源

2010-10-22 12:20:12 bobince

非常感谢您的详细解答！只是为了对'encodeHTML'的实现感到好奇：它可以使用'replace'函数来实现，对吧？效率不高吗？ – 2010-10-22 12:36:24

当然可以'替换（/＆/ g，'&'）...'。在这种情况下，无关紧要，因为搜索字符串不能包含任何正则表达式特殊字符，但通常情况下，对于纯字符串替换'split' /'join'可以更简单，因为您可以使用搜索字符串而不必担心正则表达式逃脱。不同浏览器的性能会有所不同。 – bobince 2010-10-22 12:57:24

谢谢！你能给我一个指向“施工快捷方式”教程的指针吗？ – 2010-10-22 13:34:40

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

来源

2010-10-22 12:15:49

使用双引号的属性定界符：

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

来源

2010-10-22 12:16:59

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

来源

2010-10-22 12:18:52 CodeTwice

的一个用反斜杠不起作用。这是一个JavaScript转义，而不是HTML。 – bobince 2010-10-22 12:21:07

你是对的，我编辑了我的回复并删除了转义。 – CodeTwice 2010-10-22 13:55:16

你只是在' yckart 2015-05-29 01:25:59

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

回答

相关问题