Question

根据此处的文件： https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes

它表示在执行querySelector时需要转义一些字符：

匹配不遵循CSS语法的ID或选择器（通过使用例如，冒号或空间不恰当），你必须逃避带斜杠的字符。因为反斜杠是一个转义字符在JavaScript中，如果要输入文字字符串，则必须转义它两次（一次用于JavaScript字符串，另一次用于 querySelector）：

我希望编写一个函数来对字符串进行转义，但需要知道哪些字符首先需要转义。

请帮忙感谢

Answer 1

更新回答：

在下面的评论中你说：

我正在制作一个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>

完整示例：Live Copy

[a-zA-Z0-9]

原始答案：

the CSS specification中的完整详情;例如，ID和类选择器中需要转义的字符的详细信息是here：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符U+00A0和ISO 10646字符-及更高版本以及连字符（_ ）和下划线（B&W?）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B\&W\?”可以写为“B\26 W\3F”或“querySelector”。

现在，关于querySelectorAll / var list = document.querySelectorAll(".B\\26 W\\3F");的事情是，因为它们采用字符串，并且反斜杠在字符串文字中是特殊的，所以你必须在一个字符串文字中使用两个反斜杠。字符串文字在CSS选择器中有一个反斜杠。因此，对于引用中的最后一个示例，假设您希望将其用作类选择器。你必须这样做：

.B\26 W\3F

...将选择器{{1}}传递给选择器引擎。 Live Example | Live Source

Answer 2

如果可以使用ti，您可以使用非跨浏览器解决方案（除IE之外的所有现代浏览器） - https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

CSS.escape(".foo#bar") ->"\.foo\#bar"

所有需要在querySelector中转义的东西？

2 个答案: