如何从DOM元素获取原始转义属性值以直接作为选择器使用？

问题场景示例 #

直接通过dataset获取DOM元素的属性值时，得到的是经过反转义的内容，无法直接作为CSS选择器使用：

HTML代码 #

<div id="test" data-mydata="{&quot;foo&quot;:&quot;bar&quot;,&quot;id&quot;:&quot;blah&quot;}"></div>
<div myattr="{&quot;foo&quot;:&quot;bar&quot;,&quot;id&quot;:&quot;blah&quot;}"></div>

JS代码 #

const selector = test.dataset.mydata;
console.log(selector); // 输出未转义的内容，已不具备HTML友好性

// 直接使用该值作为选择器会失败：
const el = document.querySelector(`[myattr="${selector}"]`);
console.log(el); // 无法匹配到目标元素

解决方案 #

使用CSS.escape()方法对获取到的属性值进行转义处理，即可将其安全用作CSS选择器：

修正后的JS代码 #

const selector = CSS.escape(test.dataset.mydata);
console.log(selector); // 转义后的内容可直接用于选择器

const el = document.querySelector(`[myattr="${selector}"]`);
console.log(el); // 成功匹配到目标元素

对应HTML代码 #

<div id="test" data-mydata="{&quot;foo&quot;:&quot;bar&quot;,&quot;id&quot;:&quot;blah&quot;}"></div>
<div myattr="{&quot;foo&quot;:&quot;bar&quot;,&quot;id&quot;:&quot;blah&quot;}"></div>

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