更新的答案:
在下面的评论中你说:
事情是我正在制作一个 Firefox 插件,我正在做的是通过属性来识别项目label
(因为所有项目的类都是相同的)。所以querySelector('[label="blah blah blah"]')
用户可以编辑标签,这就是问题所在,用户可以做任何事情。
啊,这改变了一切。一组完全不同的规则适用于属性选择器中的操作数。当你使用"
要包围操作数,我认为你只需要转义"
用反斜杠(当然,用反斜杠转义任何反斜杠),例如这selector(不是字符串querySelector
,我们稍后再讨论)label
与文字testing "one" two three
将会[label="testing \"one\" two three"]
。因此,从包含目标标签的变量开始,我们将替换所有"
字符与\"
和所有\
字符与\\
:
var div = document.querySelector('[label="' + theLabel.replace(/["\\]/g, '\\$&') + '"]');
完整示例:实时复制 http://jsbin.com/boxowiyo/1
<!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规范 http://www.w3.org/TR/css3-selectors/;例如,ID 和类选择器中哪些字符需要转义的详细信息是here http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier:
在 CSS 中,标识符(包括元素名称、类和选择器中的 ID)只能包含字符[a-zA-Z0-9]
和 ISO 10646 字符U+00A0
及更高版本,加上连字符 (-
) 和下划线 (_
);它们不能以数字、两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码(请参阅下一项)。例如,标识符“B&W?
“可以写成”B\&W\?
" or "B\26 W\3F
".
现在,关于querySelector
/ querySelectorAll
是因为它们采用字符串,并且反斜杠在字符串文字中很特殊,所以您必须使用two字符串文字中的反斜杠oneCSS 选择器中的反斜杠。因此,对于引用中的最后一个示例,假设您想将其用作类选择器。你必须这样做:
var list = document.querySelectorAll(".B\\26 W\\3F");
...传递选择器.B\26 W\3F
进入选择器引擎。实例 http://jsbin.com/marazahi/1 | 实时源 http://jsbin.com/marazahi/1/edit