JavaScript通过属性值选择元素时引号转义问题如何解决？

有以下几种可行的方案可以解决属性选择器的引号冲突问题：

方案1：使用原生CSS.escape()API（推荐） #

现代浏览器提供了专门的CSS.escape()方法，用于转义CSS选择器中的特殊字符，完全覆盖单引号、双引号及其他CSS保留字符的转义需求，使用成本极低：

const cat = "Children's/Kids";
// 转义后再插入选择器，无需担心引号冲突
const div = document.querySelector(`[category="${CSS.escape(cat)}"]`);

该方案支持所有现代浏览器（Chrome 46+、Firefox 31+、Safari 10.1+、Edge 79+），是最稳妥的官方实现方案。

方案2：手动遍历元素匹配属性值（全兼容，无转义风险） #

如果不想处理选择器转义逻辑，也可以直接筛选匹配属性的元素，完全避开选择器构造的引号冲突问题，兼容所有浏览器：

const cat = "Children's/Kids";
// 先获取所有带category属性的元素，再精准匹配值
const div = Array.from(document.querySelectorAll('[category]'))
  .find(el => el.getAttribute('category') === cat);

该方案无需任何转义逻辑，不管属性值包含什么特殊字符都能正常匹配，适合对兼容性要求极高的场景。

方案3：自定义转义函数（兼容旧浏览器） #

如果需要支持不支持CSS.escape()的旧版浏览器，可以自己实现CSS值转义逻辑：

function escapeCSSValue(val) {
  return val.replace(/["'\\]/g, '\\$&');
}

const cat = "Children's/Kids";
const div = document.querySelector(`[category="${escapeCSSValue(cat)}"]`);

该函数会将值内的双引号、单引号、反斜杠都提前转义，避免选择器出现语法错误。

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