在Javascript中转义引号时造成严重破坏答案

【问题标题】：Havoc while escaping quotes in Javascript在Javascript中转义引号时造成严重破坏
【发布时间】：2014-12-07 18:59:11
【问题描述】：

我正在尝试使用以下 Javascript 构建自定义 HTML/Javascript 命令（目前，“dialogText”包含蔬菜的名称，但以后也可能包含 HTML 标签）：

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

当 dialogText 只有一个词长（即“Basil”）时，它可以正常工作，结果如下：

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

但是当 dialogText 包含多个单词（即“Beet root”）时，此操作会失败。结果在语法上无效并生成 Javascript 错误：

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

为什么会发生这种情况（等号从何而来？）？

我怎样才能更改代码以使其正常工作？

【问题讨论】：

【解决方案1】：

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

由于您在属性值中有一个 " 作为数据，但没有将其表示为字符引用 (&quot;)，并且该值受限于 " - " 结束了该属性.

然后你开始一个新的属性。

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

一般来说，避免将字符串混合在一起生成 HTML 以转换为 DOM。直接使用 DOM 方法。

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

【讨论】：