Question

我有一个HTML数据属性，值中带有反斜杠。对此元素的简单查询失败;我必须在查询中使用双反斜杠。

考虑以下测试：

var file = "foo\\bar"; // That's a single backslash, to be clear.
document.getElementById('d2').dataset.file = file;

var singleBackslash = '*[data-file="'+file+'"]';
var doubleBackslash = '*[data-file="'+file.replace(/\\/g,'\\\\')+'"]';

var singleCount = document.querySelectorAll(singleBackslash).length;
var doubleCount = document.querySelectorAll(doubleBackslash).length;

var out = document.querySelector('textarea');
out.value  = "There are "+singleCount+" elements matching "+singleBackslash+"\n";
out.value += "There are "+doubleCount+" elements matching "+doubleBackslash;

<div data-file="foo\bar"></div>
<div id="d2"></div>
<textarea cols="60"></textarea>

在Win7x64上的Chrome v48.0.2564.109m上，结果为：

There are 0 elements matching *[data-file="foo\bar"]
There are 2 elements matching *[data-file="foo\\bar"]

我找不到任何需要此行为的HTML规范。所有浏览器都需要双反斜杠吗？什么规范描述了这个？

Answer 1

Selectors API Level 1规范声明querySelectorAll接受“选择字符串”，即：

...一个或多个 group of selectors ...
的列表

它链接到的选择器级别3规范说：

选择器中的字符可以使用反斜杠进行转义，与CSS的escaping rules相同。

最后，它链接到的CSS2.1规范描述了反斜杠可用于转义内容的三种方式。

因此，querySelectorAll - 与JavaScript中的任何用法分开 - 对反斜杠应用特殊含义。

使用反斜杠查询数据属性

1 个答案: