javascript - 使用 js/jQuery 解析 <script> 标签

Question

我有一个 HTML 页面，用户可以在其中编辑 HTML 资源(使用 ACE 编辑器)。在此 HTML 源代码中，有一个 <script> -tag，它做了一些非常基本的事情。

是否有任何优雅的解决方案来解析脚本标签以便(例如)评估脚本标签中使用的变量？对于“普通”标签，我使用 parseHTML() 将 html 作为 jQuery 对象。

在此示例中，我想检索 $myVal 的值(即“f00”)并将其写入#myLabel>:

<textarea id="myScript" rows="5" readonly>
  <script>
    $myVal = "f00";
  </script>
</textarea>
<label id="myLabel">Hello</label>


$(function(){
  $scriptVar = $('#myScript').text;
  // parse the $scriptVar
  // retrieve the value of, $myVal, write it to #myLabel  
  //$myParsedValue = ???
  //$('#myLabel').text('bar!'); 
});

这是 fiddle :https://jsfiddle.net/stepdown/jqcut0sn/

这可能吗？我并不真正关心普通的 js、jQuery、正则表达式，甚至可能是用于此目的的外部库。

Answer 1

感谢@JeremyThille，他为我指明了正确的方向。我发现，我想要实现的目标可以通过 jQuery $.globalEval() 实现。 - 请参阅official documentation 。

基本上，globalEval() 的作用是:它运行 <textarea> 中编写的脚本。并使变量/函数全局可访问。

重要:这意味着用户的语法错误(等)将破坏评估，并且顺序功能可能存在缺陷。此外，新变量是全局变量，因此基本上用户可以在托管页面上重写脚本。 (就我而言，这两个问题都不那么重要，因为这是一个针对经过培训的用户的内部应用程序 - 他们还通过令人惊叹的 ACE 编辑器进行语法突出显示。但我想确保指出这一点。此外，还有几篇关于使用 eval() 时的风险/糟糕时刻...)

我更新了 fiddle 以实现我想要的:https://jsfiddle.net/stepdown/Lxz7q6uv/

HTML:

<textarea id="myScript" rows="5" readonly>
   $myVal = "f00";
</textarea>
<hr />
<label id="myLabel">Hello</label>

脚本:

$(function(){
   var myScriptContent = $('#myScript').text();
   $.globalEval(myScriptContent);
   console.log($myVal);
   $('#myLabel').text($myVal); 
});