在 HTML 文本上使用 Javascript 的 eval()

Question

我正在研究 HTML 和 Javascript 中的一些基本构造（即，我是 HTML/Javascript n00b），并且有一个功能我似乎无法实现适当地。简而言之，我想从 HTML 页面的正文中获取文本并使用 Javascript（eval() 或 new Function()）对其进行评估。为了查看我对 eval() 的使用是否正确，我首先尝试了以下代码，它按预期工作（并显示值 5）：

<script>
window.onload = function () {
    eval("var t = function () { if (5>0) return 5; }();");
    document.body.innerHTML = t;
}
</script>

然而，当我试图实现从 HTML 和运行中获取 "code" 的目标时，这对我来说似乎失败了。这是一段不起作用的代码（我已经尝试了很多变体）：

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { if (5>1) { return 5; } } </p>
</body>

我测试了变量 x 实际上包含正文中所需的 "code"。但由于某种原因，以上内容将无法正常工作；它只会显示正文并忽略 eval 和更新内部 HTML 之后的语句。

奇怪的是，当我尝试 "more complex" 的代码时，它工作正常，例如：

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { var a = []; var b = [1,2,3]; for (var i in b) { a.push([b[i],'q']); } return a; } </p>
</body>

我觉得这个例子应该有效但前一个无效，这对我来说真的很奇怪； eval() 讨厌 if 语句吗？我是否遗漏了 eval() 的一些微妙方面？我是否缺少一些超基本的 Javascript 语法？感谢您提供任何帮助，包括让上述特定实例正常工作，以及有关如何实现我通常尝试做的事情的建议，即从 [=39 传递 any 代码=] 到 eval()。

注意： 如果可能，请避免任何 comments/answers 关于 eval() 如何 "evil" 或者是一个主要安全问题，或任何此类评论.我知道这些担忧。我的问题是在个人项目的上下文中，没有机会被公开部署或不安全地使用等。

Answer 1

这里的问题与 DOM 有关，而不是 JavaScript。您正在请求节点的 innerHTML 。如果你看一下你最终遇到的问题就很清楚了：

var x = document.getElementById("myP").innerHTML;
console.log(x); // "function () { if (5&gt;1) { return 5; } }"

浏览器已将 > 字符转换为 HTML 实体。你需要的是节点的textContent：

var x = document.getElementById("myP").textContent;
console.log(x); // "function () { if (5>1) { return 5; } }"

这是 working example。

在 HTML 文本上使用 Javascript 的 eval()

Using Javascript's eval() on HTML Text

html

javascript

eval