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

Get content from pre element and run as javascript

本文关键字：javascript 运行 pre 元素 获取      更新时间：2023-09-26

所以我有一堆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进行任何服务器端脚本编写。不确定这是否会让这项任务变得更容易，但我想我无论如何都会说出来。如果这是不可能的，请告诉我。

你必须像这个一样更改你的代码

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

<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>

用eval()替换executeJS()，它应该可以正常工作。

有关javascript eval的更多信息。

相关文章：