在查询选择器中需要转义哪些字符? [英] What chars needs escaping in querySelector?
问题描述
根据此处的文档: https://developer.mozilla.org/zh-CN/docs/Web/API/document.querySelector#Notes
它说在执行querySelector时需要转义一些字符:
It says some characters need to be escaped when doing querySelector:
匹配不遵循CSS语法的ID或选择器(通过使用 例如冒号或空格不正确)，则必须避开 带反斜杠的字符.由于反斜杠是转义字符 在JavaScript中，如果要输入文字字符串，则必须转义 两次(一次是JavaScript字符串，另一次是 querySelector):
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.
谢谢
推荐答案
更新后的答案:
在下面的评论中，您说:
In a comment below you said:
问题是我正在制作一个firefox插件我正在做的是通过
label中的属性标识项目(所有项目的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的字符串，我们将返回到该字符串)，文本为testing "one" two three的label将为[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和类选择器中哪些字符需要转义的细节为这里:
在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
这篇关于在查询选择器中需要转义哪些字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
