HTML Tidy 在 JavaScript 字符串文字中的脚本标记上失败答案

【问题标题】：HTML Tidy fails on script tag in JavaScript string literalHTML Tidy 在 JavaScript 字符串文字中的脚本标记上失败
【发布时间】：2014-02-26 00:31:36
【问题描述】：

我在 PHP 中使用 HTML Tidy，由于 JavaScript 字符串文字中的 <script> 标记，它产生了意想不到的结果。这是一个示例输入：

<html>
<script>
var t='<script><'+'/script>';
</script>
</html>

HTML Tidy 的输出：

<html>
<script>
//<![CDATA[
var t='<script><'+'/script>';
<\/script>
<\/html>
//]]>
</script>
</html>

它将</script></html> 解释为脚本的一部分。然后，它添加另一个</script></html> 来关闭打开的标签。我在 HTML Tidy (http://www.dirtymarkup.com/) 的在线版本上尝试了这个，它产生了同样的错误。

如何防止在 PHP 中发生此错误？

【问题讨论】：

我会说“打开一个错误票”，但他们没有任何方法可以在他们的网站上这样做......
它是一个有趣的错误，但似乎非常特定于关闭脚本标记，我只会使用您当前的解决方案.. 输出的用例也分别混淆我
能否说明为什么要给变量添加脚本标签。
@ViswanathPolaki 我正在解析网页，这些网页的作者可能想要这样做。
错误报告在这里：sourceforge.net/p/tidy/bugs 但他们似乎不想解决其中任何一个问题。伤心:(

标签： javascript php html

【解决方案1】：

玩了一会儿后，我发现可以使用评论 //'<\/script>' 来混淆算法，以防止出现此错误：

<html>
<script>
var t='<script><'+'/script>'; //'<\/script>'
</script>
</html>

清理后：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>

   <script>
var t='<script><'+'/script>'; //'<\/script>'
   </script>

   <title></title>
</head>

<body>
</body>
</html>

我的猜测是，当清理算法查看代码并检测到字符串<script> 两次时，它会立即查找</script>。并且将< 与/script> 分开会使第二个</script> 未被检测到，这就是为什么它决定在代码末尾添加另一个</script> 并以某种方式还用另一个</html> 关闭它。（确实设计很差！）

所以我做了第二个假设，即算法中没有 if 语句来确定 </scirpt> 是否在评论中，我是对的！将另一个字符串 <\/script> 作为 javascript 注释确实使算法认为总共有两个 </script>。

【讨论】：

【解决方案2】：

不需要字符串连接来避免关闭</script>。简单地转义 / 字符就足以“愚弄”浏览器中的解析器，而且似乎 HTML Tidy 的解析器也是如此：

<html>
<script>
var t='<script><\/script>';
</script>
</html>

【讨论】：

【解决方案3】：

尽量让script标签不是一个完整的单词而是一个字符串拼接

<html>
<script>
var t='<scr'+'ipt><'+'/script>';
</script>
</html>

清理后的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>

    <script>
var t='<scr'+'ipt><'+'/script>';
    </script>

    <title></title>
</head>

<body>
</body>
</html>

【讨论】：

【解决方案4】：

创建这样的脚本标签可能是一个更好的做法：（这也应该解决你的整洁问题）

<script>
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://myserver.com/file.js';
    document.getElementsByTagName('head')[0].appendChild(script);   
</script>

【讨论】：

【解决方案5】：

一种方法是让它变得整洁而不检测脚本标签。我能想到的“最干净”的方法是转义标签中的一个字符。

<html>
<script>
var t='<\script><'+'/script>';
</script>
</html>

所以你甚至可以这样做，而不必像上面那样分解字符串：

var t='<\script></\script>';

【讨论】：

【解决方案6】：

按预期工作

<html>
    <script>
        var t='<'+'script><'+'/script>';
    </script>
</html>

顺便说一句，字符串连接不是动态创建 HTML 以插入页面的最佳方式，寻找 document.createElement 甚至模板引擎（handlebars.js 是我的最爱）

【讨论】：