在JavaScript和HTML中转义撇号（单引号）字符

Question

我有以下情况：

我在javascript中编写了一个包含撇号字符的字符串。该字符串实际上是html代码，后来使用innerHTML方法附加到html。所以代码看起来像这样：

var str = '<a href="javascript:foo("ba'r")">link</a>'; (argument of the foo function is string)

然后，此字符串将插入到这样的html元素中：

dataHolder.innerHTML = str;

我尝试使用'，'和'来转义\u0027字符，但所有这些都在{{1}之后呈现为' }方法会被调用，因此，通过单击链接调用上述示例中的方法innerHTML时，我总是会遇到javascript错误：foo

Answer 1

您需要在字符串中同时包含'和"，因此您将需要第三种方式来删除字符串，您可以使用template strings。将您的ba'r字符串声明为模板字符串，并使用反斜杠\来避免其撇号：

document.querySelector('#myDiv').innerHTML =
    '<a href="javascript:foo(`ba\'r`)">link</a>';

function foo(data) {
  console.log(data);
}

<div id="myDiv"></div>

Answer 2

在字符串中使用\'而不是'，所以应该

var str = '<a href="javascript:foo(ba\'r)">link</a>';

但是，此代码仅在字符串格式方面是正确的。我想你想要的是

var str = '<a href="javascript:foo(\'bar\')">link</a>';

Answer 3

您也可以使用反引号`来避免此问题：

var str = `<a href="javascript:foo(ba'r)">link</a>`;