Html字符串替換跨度的類在IE中不起作用？

Question

有人試圖重建在JS智者：

// actually from a template file, not hardcoded in the javascript 
html = '<span class="{test}">yay</span>'; 


html = change(html, 'test', 'foo bar'); 
function change(html, key, value){ 
    html = html.replace('{'+key+'}',value); 
    html = html.replace('%7B'+key+'%7D',value); 
    return html; 
} 

element.innerHTML = html; 

在FF這工作正常（預期）：

<span class="foo bar">yay</span> 

在IE 7/8和大概6 ...它給了我這個：

<span class="foo" bar="">yay</span> 

爲什麼它創建額外的屬性，而不是做我期望它做的？

Answer 1

有人試圖在JS

重新智者我真的希望他們不要做...！

我懷疑這裏有什麼情況是，代碼是從抓住原有的HTML元素的innerHTML，而不是因爲你上面寫的字符串。在這種情況下，IE將連載它的DOM成什麼它認爲是格式化的HTML標記，這可能不是很像它最初喂標記一個很好的方式。其中一個可疑的東西，可能在這種情況下，做的是省略報價：

<SPAN class={test}>yay</SPAN> 

「！但是，這不是有效的HTML」，你的抱怨。 Pfft就像IE一樣關心。

現在做替換，你會得到：

<SPAN class=foo bar>yay</SPAN> 

哪裏bar顯然是一個新的屬性，當你把它寫回innerHTML將被解析到一個單獨的Attr節點。

再次，道德是不處理與正則表達式的HTML。當您閱讀innerHTML時，瀏覽器沒有義務向您提供正確的HTML，而不是您平均的不熟練的HTML author-clod。

這段代碼不僅會因爲這種情況而失敗，還會因爲鍵中的正則表達式特殊字符或值中的替換特殊字符或任何地方的HTML特殊字符而失敗，並且不允許相同的鍵兩次，由於某些未知原因試圖對URL編碼的字符串（？）進行模板化，如果替換值包含大括號，可能會造成混亂。

如果你可以把它所有的DOM，分配給span.className既簡單又安全。如果你必須使用HTML字符串進行模板化（如果你這樣做，你需要查看HTML轉義以避免困擾大多數JS模板系統的空洞XSS漏洞），那麼你需要將輸入HTML模板保留爲原始文本字符串，不從DOM讀取它。