Tengo una variable que puede contener tanto comillas simples como dobles.
Usando esta variable, quiero seleccionar un elemento cuyo valor de atributo sea igual a esa variable. Hago esto con un selector de atributo CSS así:
const cat = "Children's/Kids"; const div = document.querySelector(`[category='${cat}']`); <div category="Children's/Kids"></div> Actualmente, si la variable contiene comillas simples o comillas dobles, no funciona, ya que cat está entre comillas simples en el selector, y si cat contiene una comilla simple, el resultado final del selector tendrá una comilla sin cerrar.
Por ejemplo, el selector en el ejemplo anterior será [category='Children's/Kids'] , lo que generará una DOMException ya que es un selector no válido.
Si no contiene comillas, funciona.
¿Soluciones? Gracias
Puede dejar que JSON.stringify maneje la cita que se escapa por usted:
const cat = "Children's/Kids"; const div = document.querySelector(`[category=${JSON.stringify(cat)}]`); console.log('Selector:', `[category=${JSON.stringify(cat)}]`) console.log('Element:', div) <div category="Children's/Kids"></div>