QuerySelector数字ID转义异常：意外双反斜杠问题求解

问题背景 #

在TypeScript项目中处理SVG元素时，需要通过父<g>元素的ID查询其子foreignObject元素。部分ID以数字开头，因此需要转义以适配document.querySelector，但调试器中出现双反斜杠显示，导致查询失败。

SVG结构示例 #

<g id="3735df69-8da5-45a9-8580-ffd0e50b3111" transform="translate(200,200)">...</g>
<g id="080640d2-e040-4c6b-b943-7311327f8129" transform="translate(300,200)">...</g>

当前使用的转义代码 #

function sanitizeId(id: string) {
  if (/^\d/.test(id)) {
    return id.replace(/^(\d)/, "\\3$1 ").replace(/([^\w-])/g, "\\$1");
  } else {
    return id;
  }
}

const selector = `#${sanitizeId(props.__rd3t.id)} foreignObject`;
const foreignObject = document.querySelector(String(selector));

调试异常现象 #

• console.log输出的选择器：

#\\33\ 735df69-8da5-45a9-8580-ffd0e50b3111 foreignObject

• 调试器中显示的选择器：

#\\\\33\\ 735df69-8da5-45a9-8580-ffd0e50b3111 foreignObject

问题解析 #

1. 双反斜杠的本质：调试器中显示的双反斜杠只是字符串的字面量表示形式。在JavaScript/TypeScript中，字符串里的单个反斜杠需要用两个反斜杠来转义（\\），调试器为了还原代码中的写法，会把实际字符串里的单个\显示成\\，这并非实际传递给querySelector的内容。console.log输出的#\\33\ 其实对应实际字符串里的#\33 ，这部分转义逻辑本身是正确的。

2. 自定义转义函数的潜在问题：手动实现的转义函数可能覆盖不全所有CSS选择器的转义规则，比如特殊字符的处理场景，容易出现遗漏或错误。

正确解决方案 #

直接使用浏览器原生的CSS.escape()函数，它能标准化处理所有需要转义的字符（包括数字开头的ID），无需手动实现转义逻辑：

const selector = `#${CSS.escape(props.__rd3t.id)} foreignObject`;
const foreignObject = document.querySelector(selector);

CSS.escape()会自动将数字开头的ID转义为符合CSS选择器规范的格式，比如ID3735df69-...会被转义为\33 735df69-...，完全适配document.querySelector的要求。

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