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

【问题标题】：Using Javascript's eval() on HTML Text在 HTML 文本上使用 Javascript 的 eval()
【发布时间】：2015-07-30 09:23:58
【问题描述】：

我正在玩弄 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 中获取“代码”并运行它的目标时，这对我来说似乎失败了。这是一段不起作用的代码（我已经尝试了很多变体）：

<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 实际上确实包含来自正文的所需“代码”。但是由于某种原因，上述内容将无法正常工作；它只会显示正文并忽略eval 和更新innerHTML 后的语句。

奇怪的是，当我尝试“更复杂”的代码时，它可以正常工作，例如：

<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 语法吗？感谢任何帮助，无论是让上述特定实例工作，还是关于如何实现我通常尝试做的事情的建议，即将 any 代码从 HTML 传递到 eval()。

注意：如果可能，请避免任何有关 eval() 如何“邪恶”或重大安全问题或任何此类言论的 cmets/answers。我知道这些担忧。我的问题是在个人项目的背景下，没有机会被公开部署或不安全地使用等。

【问题讨论】：

您要执行的e() 是什么？试着做document.body.innerHTML = e;
@khalid13 它在 eval() 执行的语句中；它分配了一个函数，因此是 e()。它在我的第三个代码示例中执行良好...
这可能是一个编码问题，例如某些字符被转换为它们的 HTML 实体版本。
为避免 James 描述的问题，您可以将其包含在模板中。有关更多信息，请参阅此帖子：Explanation of <script type = “text/template”>

标签： javascript html eval

【解决方案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。

【讨论】：

出于好奇，我注意到您同时使用了“innerText”和“textContent”；您介意简要评论一下其中的区别吗？
@Coffee_Table 抱歉，应该是 textContent。 innerText 是在 Internet Explorer 中引入的，AFAIK 不是标准的一部分。大多数浏览器都会支持它，但textContent 更可取，原因在链接的textContent 页面中讨论。