根据此处的文档:https: //developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes
它说在执行querySelector时需要转义一些字符:
要匹配不遵循CSS语法的ID或选择器(例如,通过不恰当地使用冒号或空格),必须使用反斜杠转义字符.由于反斜杠是JavaScript中的转义字符,如果要输入文字字符串,则必须将其转义两次(一次用于JavaScript字符串,另一次用于querySelector):
我希望编写一个函数来对字符串进行转义,但需要知道哪些字符首先需要转义.
请帮助谢谢
更新的答案:
在下面的评论中你说:
事情是我正在制作一个firefox插件我正在做的是通过属性识别项目
label(cuz类对于所有项目是相同的).因此querySelector('[label="blah blah blah"]'),用户可以编辑标签,以便问题进入,用户可以做任何事情.
啊,这改变了一切.一组完全不同的规则适用于属性选择器中的操作数.当你"用来包围操作数时,我认为你只需"要用反斜杠来逃避(当然,用反斜杠转义任何反斜杠),例如选择器(不是字符串querySelector,我们会回到那个)为label与文本testing "one" two three会[label="testing \"one\" two three"].因此,与含有靶标签的变量开始,我们就全部更换",字符\"和所有\与字符\\:
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>
原始答案:
CSS规范中的完整细节; 举例来说,细节的ID和类选择哪些字符需要转义是在这里:
在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符
[a-zA-Z0-9]和ISO 10646字符U+00A0及更高字符,以及连字符(-)和下划线(_); 它们不能以数字,两个连字符或连字符后跟数字开头.标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项).例如,标识符"B&W?"可以写为"B\&W\?"或"B\26 W\3F".
现在,关于querySelector/ querySelectorAll是因为它们采用字符串,并且反斜杠在字符串文字中是特殊的,你必须在字符串文字中使用两个反斜杠在CSS选择器中有一个反斜杠.因此,对于引用中的最后一个示例,假设您希望将其用作类选择器.你必须这样做:
var list = document.querySelectorAll(".B\\26 W\\3F");
...将选择器传递给选择.B\26 W\3F器引擎.实例 | 直播源
如果可能，您可以使用此解决方案，尽管不能跨浏览器（除 IE 之外的所有现代浏览器） - https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
CSS.escape(".foo#bar") ->"\.foo\#bar"