时间戳

首页 > 解决方案 > 在javascript中以编程方式转义/脚本结束标记

javascript - 在javascript中以编程方式转义/脚本结束标记

问题描述

我有这个变量，其中包含一个脚本 html 代码

<script>
var script = "<script>console.log('script here')</script>"
</script>

我们如何以编程方式转义/结束标记中的</script>，使其看起来像下面的代码

<script>
var script = "<script>console.log('script here')<\/script>"
</script>

标签： javascript

解决方案

它不像你想象的那样工作。

第一个代码片段不起作用，因为浏览器</script>在字符串中找到了该片段并认为它是脚本元素的结束标记。它将脚本的其余部分和真正的</script>结束标记视为常规文本并将其显示在页面中（</script>标记除外）。

这意味着只解析脚本的一部分，解析器在其中发现语法错误（字符串未关闭）并且脚本不运行。

无法使用 JavaScript 代码解决此问题。这不是编码问题。这是一个 HTML 问题（有点），唯一的解决方案是以避免该问题的方式编写 HTML。

HTML 文档在元素</script>的主体内包含一个结束标记。script对于普通的 HTML 内容（例如段落），解决方案很简单：使用&lt;and&gt;来编码<and >：

<p> This is a paragraph that contains a &lt;p&gt; closing tag</p>

无论如何，您都应该在您想要的任何地方执行此操作<并>表示自己（被呈现而不是被解释为标记标记）以生成正确的 HTML。

这个简单的解决方案在<script>元素中是不可能的，因为元素的内容<script>没有被 HTML 解析器解析。它只查找</script>结束标记的第一次出现并将内容传递给 JavaScript 解析器。并且 JavaScript 解析器不理解&lt;和&gt;.

但是，有一个简单的解决方案可以解决您的问题。确保脚本不包含字符串</script>，并且一切都会正常运行。

通常，这可以通过编写：

var script = "<script>console.log('script here')<\/script>"

script或通过将字符串拆分为单词中间的两个子字符串：

var script = "<script>console.log('script here')</scr" + "ipt>"

第一个解决方案看起来好一点。

另一个更简单的解决方案是不将 JavaScript 代码放入内联script元素中，而是将其保存在.js文件中并将该文件链接到 HTML 文档中：

<script src="my-fancy-script.js"></script>

该文件my-fancy-script.js如下所示：

var script = "<script>console.log('script here')</script>"

这样，my-fancy-script.js文件的内容直接传递给 JavaScript 解析器，不会被</script>代码中的任何外观所迷惑。

推荐阅读