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

Havoc while escaping quotes in Javascript

本文关键字：严重破坏 Javascript 转义      更新时间：2023-09-26

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

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

当 dialogText 只有一个单词长（即"Basil"）时，这将正常工作，给出以下结果：

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

但是当对话框文本包含多个单词（即"甜菜根"）时，这将失败。结果在语法上无效，并生成一个 Javascript 错误：

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

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

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

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

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

然后启动一个新属性。

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

通常，避免将字符串混合在一起以生成要转换为 DOM 的 HTML。 请直接使用 DOM 方法。

var span = document.createElement('span');
span.addEventListener('click', function (event) {
    showDialog(dialogText);
});
相关文章：