如何同时逃避单引号和双引号

Question

我有这样的div：

<div onclick="location.href='RandomURL.com/index'></div>

我想将这个div附加到另一个获得ID的div：divId：

$("#divId").html('<div onclick="location.href= ??

正如你所看到的，我希望在href =之后放置角色（＆＃34;），但我已经使用 onclick =

我不能使用角色（＆＃39;），因为我已经使用了 $（＆＃34;＃divId＆＃34;）。html（

如何逃避这种情况？ （如果可能的话，不必创建另一个javascript函数）

Answer 1

使用反斜杠字符（\）来逃避它：

$("#divId").html('<div onclick="location.href=\"xxx\""');

以下是需要在javascript字符串中进行转义的characters：

• 横向标签：\t
• 垂直标签：\v
• Nul char：\0
• 退格：\b
• 表单Feed：\f
• 换行符：\n
• 回车：\r
• 单引号：\'
• 双重报价：\"
• 反斜杠：\\

如评论中所述，在这种情况下我会采取不同的做法：

$('#divId').html('<div id="foo">');
$('#foo').click(function() {
    window.location.href = 'xxx';
});

Answer 2

尝试使用反斜杠来转义单引号和双引号。

$("#divId").html('<div onclick="location.href=\'RandomURL.com/index\'"></div>');

最好使用事件委派。

$('#divId').html('<div id="foo">');

$(document).on('click', '#foo', function() {
    window.location.href = 'RandomURL.com/index';
});

Answer 3

您最多可以嵌套引号四次：

" > \" > ' > \'

或

' > \' > " > \" 

在你的情况下，它将是......喜欢

$("#divId").html("<div onclick=\"location.href='RandomURL.com/index';\"></div>");

Answer 4

使用ES6 Template Literals。使用``符号括起你的html代码。在你的情况下，它将是：

$("#divId").html(`<div onclick="location.href= ??"></div>`);

您可以在字符串中包含尽可能多的引号[']，双键[“]和反斜杠[\]。