如何在 JavaScript 变量中包含转义的<script> </script> 标记？

Question

我在 Javascript 中有一个字符串，我必须在其中转义几个字符：

<script>
function GenerateCode() {
     alert(ctry);
     var script = "<script async src=\"//somesite.com/feed/livetrend.js\"></script>";
}
</script>

我尝试了以下方法来转义字符：

var script = "<script async src=\"//somesite.com/feed/livetrend.js\"></script>";

但是，尽管已经注意在 " 前面包含一个转义字符 \，但这不能正常工作

这是一个错误 -unterminated string constant。

Answer 1

问题在于，当浏览器在打开的<script> 标记内遇到关闭的</script> 标记时，无论使用它的上下文如何，它都会在此处终止脚本标记。有几种方法可以避免这种情况。

选项 1 - 转义结束 script 标记中的 /：

var script = '<script async src="//somesite.com/feed/livetrend.js"><\/script>';

选项 2 - 将 JavaScript 包装在已注释掉的 HTML cmets 中：

<script>
/*<!--*/
var script = '<script async src="//somesite.com/feed/livetrend.js"></script>';
/*-->*/
</script>

选项 3 - 将 JavaScript 放入外部文件：

当然，将 JavaScript 移动到外部文件中将完全避免这个问题，尽管它可能不是更可取的。

Answer 2

我认为，最简单的方法是使用反引号（`）而不是引号。

例如：

var script = `<script async src="//somesite.com/feed/livetrend.js"></script>`;

Answer 3

除了 Alexander O'Mara 的回答，特别是对于字符串来自用户生成内容的情况：

选项 4 - 将字符串移动到 HTML 标记并在脚本中检索它

<input type=hidden id=escapedString
    value="&lt;script async src=&quot;//somesite.com/feed/livetrend.js&quot;&gt;&lt;/script&gt;" />

<script>
var script = escapedString.value;
</script>

这有点容易，因为所有服务器端环境和浏览器都提供标准的 HTML 转义方法，而转义 </script> 没有很好的标准化并且容易出错。