Czy dozwolone są pojedyncze/podwójne cudzysłowy w wartościach atrybutów HTML?

Question

Próbuję ustawić wartość atrybutu, który zawiera jeden cytat:

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

Jednak uzyskać następujący wynik:

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

Jak mogę rozwiązać ten problem?

Czy dopuszczalne są cudzysłowy wewnątrz wartości atrybutów?

Answer 1

Tak, oba cytaty są dozwolone w wartościach atrybutów, ale trzeba HTML uciec cytat używasz jako separatora wartości atrybutów, a także inne znaki HTML-special jak < i &:

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

jednak są zwykle znacznie lepiej nie próbuje włamać dokument wraz z ciągów znaków HTML. Ryzykujesz błędy i wstrzykiwanie HTML (prowadząc do dziur w zabezpieczeniach cross-site-scripting) za każdym razem, gdy zapomnisz uciec. Zamiast tego należy użyć metody DOM-style Podoba attr(), text() i skrót budowy:

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

Answer 2

var attr_value = "It's not working" 

Answer 3

Stosować podwójne cudzysłowy jako ogranicznik atrybut:

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

Answer 4

Można używać apostrofów wewnątrz cudzysłów lub cudzysłów wewnątrz pojedynczych cudzysłowów. Jeśli chcesz używać pojedynczych cudzysłowów w cudzysłowach lub podwójnych cudzysłowach w cudzysłowach, musisz je kodować HTML.

prawidłowych znaczników:

<label attr="This 'works'!" /> 
<label attr='This "works" too' /> 
<label attr="This does NOT \"work\"" /> 
<label attr="And this is &quot;OK&quot;, too" />