Javascript 方法会自动转义引号吗？答案

【问题标题】：Does Javascript methods auto-escape quotes?Javascript 方法会自动转义引号吗？
【发布时间】：2019-09-18 06:07:19
【问题描述】：

我想知道javascript方法是否自动转义引号，因为这段代码有效：

示例 #1

<?php $foo ="hey a quote ' "; ?>
<input type="text" value="<?php echo $foo; ?>" id="foo" />
<script>
    bar = document.getElementById('foo').value;
    alert(bar+'there is a quote, will it work? ,');
</script>

它显示警报很好，但是这个：

示例 #2

<?php $foo ="hey a quote ' "; ?>
<button onclick="alert('<?php echo $foo; ?>');">test</button>

...没有。显然，这是因为引用没有用 \ 转义。

但话又说回来，第一个例子中也没有，那为什么会这样呢？ javascript 的方法在从 DOM 中选择内容时会自动转义引用吗？

还是只是value() 方法？

我什么都没找到，所以如果你有答案的开头，我会很高兴的。

【问题讨论】：

在 JavaScript 源代码中需要转义引号，以使解析器理解字符串文字的含义。一旦解析器生成了字符串值，转义就消失了。同样，浏览器通过响应键盘活动来构建字符串值。它不需要逃生机制；无论按下什么键，这些字符都会进入字符串。
第一个 sn-p 以 <input type="text" value="hey a quote ' " id="foo" /> 结尾，但第二个以 <button onclick="alert('hey a quote ' ');">test</button> 结尾，这是一个语法错误
请注意，例如，要在 HTML 中正确转义属性值的引号，您使用与 JavaScript 源代码（&#34; 和 &#39;）完全不同的约定。那是因为您正在与 HTML 解析器对话，而不是 JavaScript 解析器。
谢谢，我没有意识到 Javascript 不像 PHP 那样在源代码中编写 HTML。

标签： javascript html dom quotes

【解决方案1】：

PHP 在服务器上进行处理，生成 HTML（在这种情况下包括嵌入的 javascript）。这发生在 HTML 被发送到浏览器进行解释之前，包括任何 JS。

如果您检查生成的 HTML 源代码，您将看到您的第二个示例变为：

<button onclick="alert('hey a quote ' ');">test</button>

这不是有效的 JS 语法。

您的第一个版本基本上可以正常工作，因为您的 PHP 字符串插入的代码中没有多余的单引号。插入反而产生：

<input type="text" value="hey a quote ' " id="foo" />

这很好。然后将该值传递给 JS 中的 alert 调用。

【讨论】：

但是为什么alert(bar+'there is a quote, will it work ,'); 工作，因为两者之间有单引号？浏览器应将其读取为alert('hey a quote ' there is a quote, will it work ,');，因此，正确吗？
抱歉，我刚刚编辑并提供了更多细节，因为我意识到我的原始陈述具有误导性。关键是，在您使用<?php echo $foo; ?> 将PHP 字符串插入HTML 时，$foo 的回显值不会干扰任何单引号。稍后您的 Javascript 中的单引号很好，PHP 输出不会干扰这一点。
好吧，我想我明白了。由于 PHP 在 DOM 中插入 HTML，它可能会中断，但不会在 JS 中中断，因为它是 DOM 本身的一部分，它只在我的示例中读取它。就像，如果它不在 JS 代码的源代码中，它就可以正常工作！非常感谢您的解释
乐于助人。永远记住，PHP 本质上是一种美化的 HTML 模板语言——它在服务器上运行并生成 HTML 代码（以及执行任意数量的其他工作，例如读取/写入文件、数据库或其他任何东西） .该 HTML（可能包括 CSS 和 Javascript）被浏览器接收并解释为 HTML，浏览器不知道也不关心内容是由 PHP 生成的，而不是其他语言，或者它是否是静态文件.

【解决方案2】：

不同之处在于，在第一个代码示例中，引号出现在没有环绕单引号的上下文中，因此没有歧义。如果您将 HTML 属性值用单引号括起来（这也是有效的 HTML），那么您就会遇到问题：

<?php $foo ="hey a quote ' "; ?>
<input type='text' value='<?php echo $foo; ?>' id='foo' />

在这种情况下，单引号应该被转义为 HTML 实体：&apos;:

<?php $foo ="hey a quote &apos; "; ?>
<input type='text' value='<?php echo $foo; ?>' id='foo' />

现在在您提供的第二个代码示例中，单引号将出现在包裹的单引号中（对于传递给alert 的字符串文字）。这是一个问题，因为单引号现在将 end 字符串文字，并且它后面的字符将导致语法错误。

这里的引号出现在 JavaScript 字符串文字中（alert 代码），而不是在第一个示例的 HTML 上下文中。在 JavaScript 字符串文字中，单引号可以用反斜杠转义。

因此，在这两种情况下（HTML 或 JavaScript），您都可能需要一种转义形式。它们是不同的。

请注意，这些都与 PHP 无关。

【讨论】：