javascript - 在内联 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>';