javascript - 如何理解 document.queryselector 中的转义字符?

标签 javascript css css-selectors

<分区>

正在查看 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Escaping_special_characters

这部分我看不懂:

// "#fooar" (\b is the backspace control character)
console.log('#foo\bar');
 // Does not match anything
document.querySelector('#foo\bar');

console.log('#foo\\bar'); // "#foo\bar"
console.log('#foo\\\\bar'); // "#foo\\bar"
document.querySelector('#foo\\\\bar');
<div id="foo\bar"></div>
<div id="foo:bar"></div>

我是一个 JavaScript 初学者,不明白为什么有 4 个斜线,我发现了另一个类似的问题,但我没有理解答案。

我尝试在“foo\bar”上运行 document.getElementById 并且它可以使用 2 个斜杠,这对我来说很有意义,因为你需要一个额外的反斜杠来转义第一个反斜杠但是为什么要额外3 什么时候使用querySelector?

我在这里看过类似的帖子,但答案对我来说并不清楚,我正在寻找一个简单的分解解释来解释这里发生的事情以及我理解的 getelementbyid 工作方式之间的区别(双反斜杠)和查询选择器(使用 4 个)。

最佳答案

根据 MDN Web 文档,关于 litteral Strings :

Besides regular, printable characters, special characters can be encoded using escape notation.

  • \\ -> \

现在,关于 Document.querySelector method :

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):

Document.getElementById 不需要这样的东西(没有给出解释,可能是遗留原因)。现在,回到我们的问题:

将该过程视为两次格式化,让我们向后查看它们:

  1. 您需要向 querySelector 发送一个反斜杠。为了满足 querySelector 的要求,您需要将其转义一次:"#foo\\bar"
  2. 如果您想在Javascript 字符串表示 反斜杠,您需要将其转义。让我们转义每个反斜杠;我们得到 "#foo\\\\bar"

关于javascript - 如何理解 document.queryselector 中的转义字符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52992709/

相关文章:

javascript - 使用 Node js 将动态字段值插入 mysql DB 时,发送后无法设置 header ?

.net - MVC3 验证 : Change element class when invalid

css - 我应该在 '#id' 或 '.class' 选择器前面添加一个元素名称吗?

jquery - 无法通过JQuery获取On Off Flip Switch当前状态

jquery - 如何从右向左滑动切换div?

css - 如何消除连接元素之间的透明空间?

html - CSS 不会覆盖样式

javascript - 使用 jQuery 对数组中的值求和

Javascript 等同于 flash.utils.getTimer?

javascript - 正则表达式匹配正数或负数或空字符串,但不单独匹配 '-'