在内联HTML中使用包含单引号的字符串作为Javascript参数

Question

考虑以下Javascript（可能不是最好的样式）：

var string = "There's an error here";
parent.innerHTML = '<div onclick="foo(\'+string+\')">'+string+'</div>';

由于单引号，生成的HTML无效：

'<div onclick="foo('There's an error here')">There's an error here</div>'

一种解决方案是使用元素自己的innerHTML作为foo()的参数（因为函数参数恰好与元素的内容相同）。但是，这不是一般解决方案。

是否可以仅使用内联HTML解决方案来处理此问题？在我的例子中，内联HTML要大得多，我不能轻易地将它转换为更“正确”的形式，使用DOM函数创建和附加HTML，以及onclick函数的闭包。

Answer 1

我想说你的主要问题是尝试使用内联属性而不是addEventListener来附加事件处理程序。如果你尊重良好做法，你所有的问题都将消失。

myDiv.addEventListener('click', function () {
    foo("There's an error here");
});

但是，如果您仍然希望按照自己的方式进行操作，则可以简单地使用单引号：

parent.innerHTML = '<div onclick="foo(\'' + string.replace(/'/g, "\\'") + '\');">' + string + '</div>';