Select elements by attributes with ":" (colon)

Question

In my project, there's a case where a library generates elements, and I need to select specific elements from there - which happen to contain an attribute with ":".
In other words, I ended up attempting to select using: document.querySelectorAll("[xml:space]").
But, when tested in Chrome, it didn't work, nor selecting using document.querySelectorAll("['xml:space']") - they both threw a DOMException:
https://i.sstatic.net/AHIeB.png

My question is, how to make the above selector return the list of the elements with xml:space attribute?
Thanks!

Dysphagia

I think you need to escape the colon '[xml\\3A space]' see mothereff.in/css-escapes – Outcaste

Perfect! Thank you so much! – Dysphagia

Answer 1

You need to escape the colon

document.querySelectorAll('[xml\\3A space]')

I used https://mothereff.in/css-escapes to get the code above :)

Outcaste

Answer 2

Escape the : by preceding it with a double backslash \\

document.querySelectorAll("[xml\\:space]")

See this:

https://bugzilla.mozilla.org/show_bug.cgi?id=883044

Dotti

Not sure why this answer is linking to a Bugzilla report that has been rightfully closed as not a bug. – Futhark

Answer 3

A more robust solution than only targeting colons specifically would be to use CSS.escape()

const query = CSS.escape("xml:space")    // "xml\\:space"
document.querySelectorAll(`[${query}]`)

Note that we keep the square brackets outside of CSS.escape() as those are not part of the attribute name and we want them to keep their semantic meaning in this selector.

Compurgation

Answer 4

try this

document.querySelectorAll('[*|space]')

Sommers

Answer 5

can also do

document.querySelectorAll('[id="xml:space"]')

Wirth

Best option for when the id is dynamic. – Vines

This is completely wrong and inapplicable: the question was about an attribute with the name xml:space, not an ID attribute with the value xml:space. – Goring