document.querySelector get class name containing parentheses

Question

I am writing software that has to work with the dom of a third-party web-app that I don't control. Some of the class names have parameter, eg class="view_box(200px)". I'm guessing these class names are Sass/Less mixins/arguments?

document.querySelector doesn't seem to like .view_box(200px) as a valid class selector, and simply querying .view_box doesn't return any of the elements that have the full string with argument as their class.

I tried escaping the parens as \( and \). I even tried URL encoding them as %28 and %29. I get the error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.view_box(200px)' is not a valid selector.

Hydrothermal · Accepted Answer · 2018-12-22 07:00:36Z

11

You need to pass a literal backslash into the argument:

document.querySelector(".view_box\\(200px\\)")

answered Dec 22, 2018 at 7:00

Hydrothermal

5,1317 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CertainPerformance Over a year ago

And if there are more than a couple parentheses and the double-escaping seems too annoying, you can use String.raw instead

V. Rubinetti Over a year ago

I just learned that there is a built-in function to escape these types of CSS reserved characters, which might help someone stumbling on this issue: developer.mozilla.org/en-US/docs/Web/API/CSS/escape

Collectives™ on Stack Overflow

document.querySelector get class name containing parentheses

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related