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>';