document.write - 用“<\/script>”替换“</script>”标签答案

【问题标题】：document.write - replace "</script>" tags with "<\/script>"document.write - 用“<\/script>”替换“</script>”标签
【发布时间】：2014-07-28 19:06:11
【问题描述】：

我已经测试了这段代码，手动将反斜杠添加到所有 </script> 标记中，并且
如果所有标签都变为<\/script>，则代码有效。

var iframe = document.createElement('iframe');
var html = '<html><head><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"><\/script><script type="text/javascript">$(window).load(function(){function popo1(){alert("ciaoooo!");}popo1();$(".eccolo").html("<br><br><br><br>xD sygsyusgsuygsus ysg usygsuys");});<\/script></head><body><div class="eccolo"></div></body></html>';

document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

DEMO

但我需要使用类似的东西动态地用<\/script> 自动替换所有</script> 标签

XXX.replace(/<\/script>/ig, "<\\\/script>");

根据this post

但似乎这种类型的替换实际上不起作用......

var iframe = document.createElement('iframe');
var XXX = '<html><head><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"><\/script><script type="text/javascript">$(window).load(function(){function popo1(){alert("ciaoooo!");}popo1();$(".eccolo").html("<br><br><br><br>xD sygsyusgsuygsus ysg usygsuys");});<\/script></head><body><div class="eccolo"></div></body></html>';

var YYY = XXX.replace(/<\/script>/ig, "<\\\/script>");

document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(YYY);
iframe.contentWindow.document.close();

DEMO

不幸的是我不能使用 .js 文件，所以我希望有一种方法可以正确地替换标签

【问题讨论】：

你为什么用document.open/write/close...
@edward：我已经更新了我的答案。该帖子中的内容与您正在做的事情无关。
为什么你认为它不起作用？在您的演示中尝试alert(YYY)。它有你想要的<\/script>

标签： javascript jquery replace

【解决方案1】：

但是如果我想用<\/script>动态替换所有</script>标签怎么办...

在下面的评论中，你说过：

我从一个总是变化的输入中得到var XXX。我只是在我的问题中添加了一个定义的值（var XXX='<html><head>...），例如

这与您的问题完全不同。如果您说您将收到 XXX 字符串中的输入，其内容（在内存中，而不是字符串文字）如下所示：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            function popo1() {
                alert("ciaoooo!");
            }
            popo1();
            $(".eccolo").html("<br><br><br><br>xD sygsyusgsuygsus ysg usygsuys");
        });
    </script>
</head>
<body>
    <div class="eccolo"></div>
</body>
</html>

...然后输入非常好，可以按原样使用来设置iframe的内容。您不必对其进行更换。您链接到的帖子与您正在做的事情无关。

但如果你说你会得到这样的输入：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            var str = "The problem is here: </script>"; // <======
        });
    </script>
</head>
<body>
    <div class="eccolo"></div>
</body>
</html>

...那么您将处于与 HTML 解析器相同的不幸位置：您不知道子字符串 </script> 何时实际结束脚本元素，或者是 JavaScript 字符串文字（或注释）中的文本.如果您有一个包含该内容的网页，HTML 解析器会断定脚本元素在The problem is here: 之后立即结束。事实上，如果你通过document.write 将该内容输出到iframe，解析器就会卡住它。行：

var str = "The problem is here: </script>";

需要

var str = "The problem is here: <\/script>";
// or
var str = "The problem is here: </sc" + "ript>";
// or similar

...为了避免绊倒 HTML 解析器。（在 .js 文件中会很好，但这不是您的用例。）

从根本上说，如果您收到包含类似内容的输入，那么给您的人就是给您无效的输入。子字符串 </script> 不能出现在 <script>/</script> 标签内的 JavaScript 代码中——不在字符串文字中，不在评论中，不在任何地方。

规范定义的答案是：不要试图弄清楚，要求它是正确的。但是如果您知道脚本是 JavaScript，并且您真的希望允许无效输入并更正它，那么您将需要一个 JavaScript 解析器。这听起来很离谱，但Esprima 就是这样，Meteor 的东西中有 jsparser，可能还有其他的。您将扫描给定的字符串以找到 <script>，然后让 JavaScript 解析器接管并解析代码（您可能需要对其进行修改，以便它知道在字符串文字之外停止在 </script> / 评论）。然后获取解析器使用的文本，使用您的replace 将代码文本中的任何</script> 转换为<\/script>，然后继续。

这是不平凡的，这就是规范不需要 HTML 解析器来做这件事的原因。

但同样，如果输入类似于您问题中的示例（没有用于避免字符串文字出现此问题的反斜杠），您根本不必执行 replace。直接输出到 iframe 就可以了。

【讨论】：

如果你绝对必须在你的 var XXX 中有脚本，并且不能使用 .js 文件，那么你需要在XXX 之前添加反斜杠之前变量进入您的脚本/HTML。

【解决方案2】：

您可以通过编程方式创建脚本标签，并在页面加载后附加到 head 标签中。

以下是代码和DEMO

var iframe = document.createElement('iframe');

var html = '<html><head></head><body><div class="eccolo"></div></body></html>';

document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);

var script1 = iframe.contentWindow.document.createElement('script');
var script2 = iframe.contentWindow.document.createElement('script');

script2.textContent = '$(window).load(function(){function popo1(){alert("ciaoooo!");}popo1();$(".eccolo").html("<br><br><br><br>xD sygsyusgsuygsus ysg usygsuys");});'
var head = iframe.contentWindow.document.querySelector('head');
head.appendChild(script1);
script1.onload = function() {
    head.appendChild(script2);    
}
script1.src = 'http://code.jquery.com/jquery-1.11.0.js';
iframe.contentWindow.document.close();

希望对你有帮助...

【讨论】：