如何使用属性选择器查找属性值包含反斜杠\的HTML元素

问题原因 #

反斜杠\在两个层面被转义，导致选择器匹配失败：

• JavaScript字符串解析阶段：你写在字符串字面量中的\会被JS优先识别为转义符，比如\07会被解析为ASCII码对应的控制字符，最终传入CSS选择器引擎的内容和你预期的2021\07完全不一致。
• CSS选择器解析阶段：即使\成功通过JS字符串解析，CSS规则中\本身也是转义字符，要匹配属性值里的字面量\，也需要对\做转义处理。

解决方案 #

方案1：双重转义反斜杠 #

要让选择器最终识别到1个字面量\，你需要在字符串里写4个\：其中2个用来过JS字符串转义得到1个\，剩下2个用来过CSS选择器转义得到1个字面量\。
匹配完整路径的示例代码：

const img = document.querySelector('[data-id="safe-file://E:\\\\2021\\\\07\\\\vhi9TKXoiaF7GOOQc0Z6o7nK.png"]');

匹配包含2021\07片段的示例代码：

const img = document.querySelector('[data-id*="2021\\\\07"]');

方案2：用String.raw避免JS层转义 #

使用String.raw处理模板字符串，JS不会解析字符串内的转义符，你只需要处理CSS层的转义，每个\写2次即可：

const selector = String.raw`[data-id*="2021\\07"]`;
const img = document.querySelector(selector);

方案3：过滤属性值避开转义 #

如果不想处理转义规则，可以直接遍历匹配的元素，用JS字符串匹配逻辑筛选目标，完全不用处理反斜杠转义：

// 按完整文件名匹配
const img = Array.from(document.querySelectorAll('img.comic-img')).find(el => 
  el.dataset.id.endsWith('vhi9TKXoiaF7GOOQc0Z6o7nK.png')
);

内容的提问来源于stack exchange，提问作者TheCrown