如何在HTML中转义JavaScript代码

Question

addHtml我的JS代码中有一些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一个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!');
};