Havoc同時在Javascript中轉義引號

Question

我正在嘗試使用以下Javascript構建自定義HTML/Javascript命令（現在，「dialogText」包含蔬菜的名稱，但也可能稍後會包含HTML標記）：

str = str + "<span onClick=showDialog('"+dialogText+"')>"; 

當dialogText只有一個字長（即「羅勒」），這正常工作，給出以下結果：

<span onclick="showDialog('Basil')"> 

但當dialogText包括不止一個單詞（即「甜菜根」） ，這失敗了。結果語法無效並生成一個Javascript錯誤：

<span onclick="showDialog('Beet" root')=""> 

爲什麼會發生這種情況（等號來自哪裏？）？

我該如何更改代碼才能使其工作？

Answer 1

您不是在查看您正在生成的HTML，而是將該HTML轉換爲DOM，然後將其序列化回HTML。

由於你有"作爲屬性值的數據，但沒有表示它作爲字符引用（"），並且該值是有限的與" - 所述"結束的屬性。

然後開始一個新的屬性。

由於下一個屬性沒有值，因此當瀏覽器嘗試錯誤更正時，它會被分配一個空字符串。

---

通常，避免將字符串混合在一起以生成用於轉換爲DOM的HTML。直接使用DOM方法。

var span = document.createElement('span'); 
span.addEventListener('click', function (event) { 
    showDialog(dialogText); 
});