如何正确使用引号内的引号

Question

如果使用如下字符串创建带有JS的HTML元素，如何在onclick事件中添加所需的额外引号？由于我已经用尽了双引号和单引号，有没有一种优雅的方法使这个工作？

var foo_td="<td onclick='window.open('newpage.html', '_blank')'>Open Page</td>";

Answer 1

您需要用双引号'替换最里面的单引号"，并使用单反斜杠\转义它们，如下所示：

var foo_td="<td onclick='window.open(\"newpage.html\", \"_blank\")'>Open Page</td>";

Demo

为什么要在第一时间引用引号

这是因为onclick事件将在此td上触发，如果没有引号（如果引号未转义），则会查找名为newpage.html的变量和_blank并给出错误，因为这些变量（很可能）不会存在。

为什么不能使用单引号单反斜杠

单反斜杠只会转义字符串以评估此字符串表达式，并且当该值存储在字符串中时，它将忽略此反斜杠。

为什么不用单引号加倍反斜杠

当节点在DOM上呈现时（可以在浏览器的Developer Tools上进行检查），其属性值包含在双引号内而不是单引号中。因此，它将被渲染为此，因此会出错。

<div onclick="window.open(\" newpage.html\',="" \'_blank\')'="">Open Page</div>

因此，基于上面给出的三个原因，如果要将字符串参数传递给属性的函数调用，总是要转义双引号 。