如何在HTML中转义JavaScript代码

Question

我的JS代码中有一些addHtml JavaScript函数。我想知道如何正确地逃避HTML / JS代码。基本上，我现在正在尝试的是：

addHtml("<a onclick=\"alert(\\\"Hello from JS\\\")\">click me</a>")

然而，这不起作用。它会添加a元素，但单击它时它不会执行任何操作。

我不想将所有"替换为'作为解决方法。 （如果我这样做，那就有效。）

Answer 1

  

我想知道如何正确地转义HTML / JS代码。

将字符串内容插入HTML事件处理程序属性：

（1）将其编码为JavaScript字符串文字：

alert("Hello \"world\"");

（2）将完整的JavaScript语句编码为HTML：

<a onclick="alert(&quot;Hello \&quot;world\&quot;&quot;">foo</a>

由于您似乎再次将 HTML HTML包含在JavaScript字符串文字中，因此您必须再次对进行JS编码：

html= "<a onclick=\"alert(&quot;Hello \\&quot;world\\&quot;&quot;\">foo<\/a>";

注意双反斜杠以及<\/，这对于避免</块中的<script>序列是必要的，否则该序列将无效且可能会中断。

你可以通过混合单引号和双引号减少双重转义的数量来减少对自己的影响，但是对于一般情况你无法解决它;还有许多其他角色会导致问题。

所有这些逃避恐怖是避免内联事件处理程序属性的另一个好理由。抛出充满HTML的字符串。使用DOM样式的方法，直接从JavaScript分配事件处理程序：

var a= document.createElement('a');
a.onclick= function() {
    alert('Hello from normal JS with no extra escaping!');
};

Answer 2

我的解决方案是

addHtml('<a onclick="alert(\'Hello from JS\')">click me</a>') 

我通常在Javascript字符串中使用单引号，在HTML属性中使用双引号。我认为这是一个很好的规则。

Answer 3

这个怎么样？

addHtml("<a onclick=\"alert(&quot;Hello from JS&quot;)\">click me</a>");

无论如何，当我在Firefox中测试时，它都能正常工作。

Answer 4

addHtml("<a onclick='alert(\"Hello from JS\")'>click me</a>")

Answer 5

浏览器中呈现的最终HTML是什么样的？我认为这三个斜杠可能会导致问题。

Answer 6

问题可能是这个......

现在，您的代码将添加到HTML

<a onclick="alert("Hello from Javascript")"></a>

这假设将正确删除转义斜杠。

问题在于警报无法处理“在其内部...您必须将这些引号更改为单引号。

addHtml("<a onclick=\"alert(\\\'Hello from JS\\\')\">click me</a>")

那应该适合你。