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); 
});