javascript + AST：将带有脚本的html解析为html + script + css？

Question

我得到了一些混合了 html + javascript + css 的（可能是恶意的）模板 （内联或作为外部链接）在“字符串”中

<!-- well known libs -->
<link  href="//cdn/foolib.min.css" rel="stylesheet">
<script src="//cdn/foolib.min.js"></script>
<!-- this is the core of the template -->
<div>foo</div>
<style>body {}</style>
<script src="//cdn/foolib2.min.js"></script>
<link  href="//cdn/foolib2.min.css" rel="stylesheet">
<script>
...javascript code...
</script>
<div id='foo'></div>
<style>#foo {}</style>

我想将其分解为 3 个“字符串”（或其他更方便的数据结构），其中包含纯 html、脚本、css （有点像你在所有 jsfiddle 克隆中找到的 3 个窗口）

html

<div>foo</div>
<div id='foo'></div>

脚本

<script src="//cdn/foolib.min.js"></script>
<script src="//cdn/foolib2.min.js"></script>
<script>
...javascript code...
</script>

css

<link  href="//cdn/foolib.min.css" rel="stylesheet">
<style>body {}</style>
<link  href="//cdn/foolib2.min.css" rel="stylesheet">
<style>#foo {}</style>

我想我必须解析字符串并进行 AST 和进程，但有人可以提示我。

Answer 1

当您有嵌套的语言片段时，您基本上要做的是解析最外层的语言（例如 HTML），提取这些语言元素并将其他嵌入式语言的片段捕获为任何类型的子字符串（例如脚本文本)，然后以相同的方式递归地重新处理嵌入式语言的片段，直到用完嵌套。

您不一定会得到一种语言的整洁元素，因为在文本语言中进行这种嵌套的人将包含机制视为任意预处理器。 因此，在 PHP 文件中，您可以找到最外层的 PHP 文本（大部分看起来像 HTML），语言包含是实际的 PHP 代码。因此，您可能必须解析 PHP-as-HTML、真正的 PHP 代码和嵌套的 JavaScript。如果“看起来像 HMTL”部分恰好是脚本（例如 JavaScript），则转换点可能在转换点中，可能在关键字或变量名的中间；我看到 PHP 代码与 Javascript 交替生成一个由 JavaScript 变量 X1、X2、...组成的“数组”，其中 x sub i 是作为一点 Javascript 生成的，然后是发出 id 数字部分的 PHP .

因此，您不能轻易地将这些语言解析为完整的程序、界限分明的语句，甚至是完整的关键字或标识符。这将使解析变得非常困难，并且对已解析程序的推理更加困难。考虑一下 PHP 可能会为脚本语言吐出部分多行注释，然后有时吐出早期结束或后期结束的好想法。你打算如何在早期和晚期之间对代码进行分类？

我们用我们的工具做了很多这样的事情。我们处理其中一些案件。我们不处理真正恶心的东西，因为它……很难。