Havoc同时在Javascript中转义引号

Question

我正在尝试使用以下Javascript构建自定义HTML / Javascript命令（现在，＆＃34; dialogText＆＃34;包含蔬菜的名称，但它以后可能也包含HTML标记）：

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

当dialogText只有一个字长（即＆＃34; Basil＆＃34;）时，这可以正常工作，给出以下结果：

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

但是当dialogText包含多个单词（即＆＃34; Beet root＆＃34;）时，这会失败。结果在语法上无效并生成Javascript错误：

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

为什么会发生这种情况（等号来自哪里？）？

我如何更改代码以使其有效？

Answer 1

您不是在查看正在生成的HTML，而是将该HTML转换为DOM，然后将其序列化为HTML。

由于您在属性值中有"作为数据，但未将其表示为字符引用（"），并且该值受"限制 - "结束了该属性。

然后您开始一个新属性。

由于下一个属性没有值，因此当浏览器尝试纠错时，会为其分配一个空字符串。

---

通常，避免将字符串拼接在一起以生成HTML以便转换为DOM。直接使用DOM方法。

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