从pre元素获取内容并以javascript运行

Question

所以我有一堆JavaScript代码段，每个代码段都包含在自己的pre标记中。我想知道是否可以从pre标记中获取内容并将其作为JavaScript运行。

例如，假设我的pre标签之一如下所示：

<pre id="basic-alert">alert('Hello World');</pre>

当我点击某个按钮时，我想从此pre中获取内容并将其作为JavaScript运行。

我知道我可以做到这一点

$('[data-target="#basic-alert"]').on('click', function(e) {
    alert('Hello World');
});

但我有很多代码示例，并且想知道是否可以避免将每个代码添加到JavaScript文件中。我想做这样的事情

<div class="code-example">
    <button>Run Code</button>
    <pre>alert('Hello World');</pre>
</div>

然后在JavaScript中调用类似的东西

$('.code-example > button').on('click', function(e) {
    var code = $(this).closest('.code-example').find('pre').text();
    executeJS(code);
});

executeJS不是我所做的功能，我只是使用它，因为我不确定动态执行JavaScript代码的代码是什么。

对于任何服务器端脚本，我都可以访问PHP。不确定这是否会使这项任务变得更容易，但我想我还是会说出来。如果这是不可能的，请告诉我。

Answer 1

您必须像这样更改您的代码

$('.code-example > button').on('click', function(e) {
  var code = $(this).parent().find('pre').html();
  eval(code);
});

Answer 2

将executeJS()替换为eval()，它应该按预期工作。

有关javascript eval的更多信息。

Answer 3

<pre id="basic-alert">alert('Hello World')</pre>
<button onclick="eval(document.getElementById('basic-alert').innerHTML);">Click Me!</button>

jQuery编辑：

<pre id="basic-alert">alert('Hello World')</pre>
<button onclick='eval($("#basic-alert").text());'>Click Me!</button>