为什么CSS.escape没有按照要求用\转义？

Question

如果我有一个带有ID: elementid(2) 的元素，并想用 document.querySelector:

document.querySelector('#elementid(2)');      ---------- DOES NOT WORK 
document.querySelector('#elementid\\(2\\)');  ---------- WORKS!
document.querySelector(CSS.escape('#elementid(2)'));  -- DOES NOT WORK

为什么 CSS.escape 逃不过 \\ 而用 \? 有没有一种不需要框架就能正确实现的简洁方法？

Answer 1

CSS.escape 回避 都 在CSS中具有特殊意义的字符。

给定您输入的 #elementid(2) 输出是 \#elementid\(2\).

它已经逃脱了 # 以及你打算逃跑的人物。

正确的用法应该是这样的。

const id = 'elementid(2)';
const CSS_safe_id = CSS.escape(id);
const selector = `#${CSS_safe_id}`;
const element = document.querySelector(selector);
console.log(element.textContent);

<div id="elementid(2)">Hello, world</div>

当然，这也可以合并成一个单行本， 但这样就不太清楚了。

const element = document.querySelector(`#${CSS.escape('elementid(2)')}`);

---

为什么CSS.escape没有按要求用\转义，而是用\转义？

这不是一个问题，而是由于 \ 字符本身需要在 字符语法.

的产出。CSS.escape 是内存中的一个字符串，而不是源代码中的一个字符串文字。