所有需要在querySelector中转义的东西？ [英] What all needs escaping in querySelector?
问题描述
根据此处的文件：
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes
它说一些字符需要在执行querySelector时被转义：
It says some charcters need to be escaped when doing querySelector:
匹配不遵循CSS语法的ID或选择器（通过使用
冒号或例如，你必须使用反斜杠转义
字符。由于反斜杠是JavaScript中的转义字符
，如果要输入文字字符串，则必须将
转义两次（一次用于JavaScript字符串，另一次用于
querySelector）： / p>
To match ID or selectors that do not follow the CSS syntax (by using a colon or space inappropriately for example), you must escape the character with a back slash. As the backslash is 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):
我希望编写一个函数来对字符串进行转义，但需要知道哪些字符首先需要转义。
I was hoping to write a function that does the escaping on a string but needed to know which chars needed escaping first.
请帮助
谢谢
推荐答案
更新回答：
在下面的评论中你说：
我正在制作一个firefox插件通过
标签中的属性识别项目（所有项目的cuz类相同）。所以querySelector（'[label =blah blah blah]'）并且用户可以编辑标签，以便问题出现，用户可以做任何事情。
The thing is Im making a firefox addon Im doing is identifying items by the attribute in
label(cuz class is same for all items). and soquerySelector('[label="blah blah blah"]')and the user can edit the label, so thats where the problem comes in, users can make it anything.
啊，这会改变一切。一组完全不同的规则适用于属性选择器中的操作数。当你使用来包围操作数时，我认为你只需要用反斜杠转义（当然，用反斜杠逃避任何反斜杠），例如选择器（不是 querySelector 的字符串，我们将回到那里）获取标签用文本测试onetwo three 将 [label =testing \one \two three] 。因此，从包含目标标签的变量开始，我们将所有字符替换为 \和所有 \ 字符 \\ ：
Ah, that changes everything. A completely different set of rules applies for the operand in an attribute selector. As you're using " to surround the operand, I think you just have to escape the " with a backslash (and of course, escape any backslashes with a backslash), e.g. the selector (not the string for querySelector, we'll come back to that) for a label with the text testing "one" two three would be [label="testing \"one\" two three"]. So starting with a variable containing the target label, we'd replace all " characters with \" and all \ characters with \\:
var div = document.querySelector('[label="' + theLabel.replace(/["\\]/g, '\\$&') + '"]');
完整示例：实时复制
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Escaping attributes</title>
</head>
<body>
<div label='testing "one" \two three'>This should turn green</div>
<script>
(function() {
var label = 'testing "one" \\two three';
var div = document.querySelector('[label="' + label.replace(/["\\]/g, '\\$&') + '"]');
div.style.color = "green";
})();
</script>
</body>
</html>
原始答案：
Original answer:
CSS规范中的完整详细信息;例如，ID和类选择器中哪些字符需要转义的详细信息是这里：
Full details in the CSS specification; for instance, the details for what characters in ID and class selectors need escaping is here:
在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符
[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（-）和下划线（_）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符B& W？可以写成B \& W\？或B \26 W \ 3F。
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters
[a-zA-Z0-9]and ISO 10646 charactersU+00A0and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
现在，关于 querySelector / querySelectorAll 的事情是，因为它们采用字符串，反斜杠在字符串文字中是特殊的，你必须在字符串文字中使用两个反斜杠，才能在CSS选择器中使用一个反斜杠。因此，对于引用中的最后一个示例，假设您希望将其用作类选择器。你必须这样做：
Now, the thing about querySelector / querySelectorAll is that since they take a string, and backslashes are special in string literals, you have to use two backslashes in a string literal to have one backslash in your CSS selector. So for the last example in the quote, suppose you wanted to use that as a class selector. You'd have to do this:
var list = document.querySelectorAll(".B\\26 W\\3F");
...通过选择器 .B\26 W \ 3F 进入选择器引擎。 实例 直播资源
...which passes the selector .B\26 W\3F into the selector engine. Live Example | Live Source
这篇关于所有需要在querySelector中转义的东西？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
