如何一次在 jquery 的 append()、onclick()、alert() 中转义单引号或双引号？答案

【问题标题】：How to escape single quotes or double quotes within jquery's append(), onclick(), alert() at one time?如何一次在 jquery 的 append()、onclick()、alert() 中转义单引号或双引号？
【发布时间】：2014-02-18 09:36:08
【问题描述】：

我在使用 javascript 开发 html 时遇到一个问题。

最后我想要的 html 是：

<div id="test">
<div onclick="alert("it's a test.")">Show</div>
</div>

但在代码中我希望它是这样实现的：

<div id="test"></div>
<script>
var tmp="it's a test.";//be careful, there must be a single quote in this variable
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");
</script>

在萤火虫中显示：

<div id="test">
<div ")'="" test.="" a="" s="" onclick="alert(" it">Show</div>
</div>

所以我认为这是一个逃避问题。但我认为它至少有 3 个深度级别。任何人都可以帮助我吗？谢谢！

【问题讨论】：

当你使用 jQuery 时为什么要onclick=...？
因为这段代码在for循环中。所以这个页面中的代码是完全动态的。
那你就用闭包吧！
@SalmanA 或click 的data 参数，这使得它更简单（见我的回答）。

标签： javascript jquery html escaping

【解决方案1】：

不要使用 jQuery 编写内联脚本。替换

$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");

与

$('<div>').click(function(){ alert(" "+tmp+" ") }).text('Show').appendTo('#test');

这边

您没有在点击时评估代码
直接检测语法错误
不会有引号转义问题
代码更具可读性
您将拥有一个直接绑定，没有无用的选择器解析
当你需要一个变量时（例如temp），你不需要把它放在全局范围内，它可以在元素添加的范围内

要在评论中回答您的问题，您可以

在循环时使用中间闭包将值括起来 (example here)
或使用jQuery's click function 的eventData 参数。

使用 jQuery 的 eventData 参数的示例：

var names = ['A', 'B'];
for (var i=0; i<names.length; i++) {
  $('<div>').text('link '+(i+1)).click(names[i], function(e) {
    alert('Name : ' + e.data);
  }).appendTo(document.body);
}

Demonstration

【讨论】：

但是如果这个块在一个数组的for循环中，并且变量temp依赖于数组中的变量呢？
@Luc 然后使用中间闭包来保护它。它会仍然比使用写成字符串文字的代码干净得多。
我的情况比我描述的要复杂。它在 ul 中的一个 li 中，其中有许多 div 。实际上是触发了 onclick。真的谢谢你。

【解决方案2】：

一种更简单的方法是将新的div 附加到您的#test，然后使用事件委托为您新添加的div 绑定点击事件，如下所示：

$('#test').append("<div class='newDiv'>Show</div>");

$('#test').on('click','.newDiv',function() {
    alert("it's a test.");
});

【讨论】：

【解决方案3】：

反斜杠可用于转义特殊字符

<div id="test"></div>
<script>
var tmp=\"it's a test.\";//be careful, there must be a single quote in this variable
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");
</script>

这应该有希望，如果不是，它应该可以帮助你开始

【讨论】：