在单引号字符串中转义 onClick 参数周围的双引号答案

【问题标题】：Escaping double quotes around argument of onClick in single quote string在单引号字符串中转义 onClick 参数周围的双引号
【发布时间】：2014-06-27 18:21:38
【问题描述】：

我问的是转义这样的字符串：

function my(mstr){alert(mstr);};
document.getElementById('home').innerHTML = '<button onclick="my("a")">a</button>'

我们有
'<... onclick="fun("a")"...>'
所以它的双引号在单引号里面的双引号里面。

简单的'<button onclick="my(\"a\")">...' 给出语法错误。

我知道我可以像
'<button onclick="my(\'a\')">...'

一样逃避它

但我想知道为什么会出现这种语法错误。

编辑：这是 jsfiddle http://jsfiddle.net/pVy9W/1/

EDIT2：BallBin 说它渲染 <button onclick="my("a")">a</button> 所以
试图逃避反斜杠：
'<button type="button" onclick="my(\\\"a\\\")">a</button>';
它呈现为奇怪：
<button type="button" onclick="my(\" a\")"="">a</button>
并给出错误：
Uncaught SyntaxError: Unexpected token ILLEGAL

【问题讨论】：

更好的方法是不首先内联事件处理程序。请改用addEventListener。
你得到的实际错误是什么？
因为当它呈现按钮时它呈现为<button onclick="my("a")">a</button>。您需要混合使用双引号和单引号。
@Chris 问题是你不能在那里使用双引号；您的脚本导致无效的 HTML 输出。在这种情况下，您绝对必须在双引号内使用单引号。您的另一个选择是将您的函数调用定义为字符串变量，如var functionCall = "my(\"a\")";，然后使用document.getElementById('home').innerHTML = '<button onclick=" + functionCall + ">a</button>";。
@Chris 就像您在第三个示例 onclick="my(\'a\')" 中的表现一样。将其呈现为<button onlcick="my('a')">a</button>。现在，当单击按钮时，它将调用 my() 并传入字符“a”。

标签： javascript escaping

【解决方案1】：

由双引号分隔的 HTML 属性值中的双引号应表示为 &quot; \ 字符在 HTML 中没有特殊意义。

您的 JavaScript 字符串由 ' 字符分隔，因此对于 JavaScript，" 不需要转义（使用 \）。

不过，我首先会避免将 JS 嵌套在 JS 内部的 HTML 中。使用 DOM 而不是字符串操作。

// Create button with content and an event handler
var button = document.createElement('button');
button.appendChild(document.createTextNode('a'));
button.addEventListener("click", clickHandler);

// Get container, empty it and add the button to it
var container = document.getElementById('home');
container.innerHTML = ''; // Delete all nodes inside the element
container.appendChild(button);

function clickHandler(event) {
    my("a");
}

【讨论】：