Problem finding element after class escape

JavaScript
1

Hello, why is an element with a class starting with numbers not found when escaping? The element is not found when trying to find it in its parent element, as well as when trying to search generally in the document. The problem must be in the code in this case, since the element cannot be found in the document itself when the resulting class looks like “.\792o42ho1jo5”

function escapeCSSSelector(valueStringClass) {
    if (/^\d+/.test(valueStringClass)) {
        return "." + valueStringClass.replace(/^(\d+)/, "\\$1");
    }
    else {
        return "." + valueStringClass;
    }
}
document.querySelector(escapeCSSSelector(class))
2

can you also give the html with example class values with the issue?

1 Like
3

These elements are created dynamically and therefore classes are also generated automatically. However, since the element being searched for already exists in the DOM tree at the time of searching, even directly through the document, the problem must be with the function. Even when there is no obvious error from the queryselector method that the specified selector is invalid, for example.

<div class="792o42ho1jo5" style="display: flex; flex-direction: column; justify-content: start; align-items: center; width: 870px; height: auto; border-right: 1px solid rgb(75, 75, 75); border-left: 1px solid rgb(75, 75, 75); opacity: 1;">
<div class="jnplol0hao1h0-590d48mbm7n0-bi74ogaac6ol0-cajbiakicllb0-m6ggf2m9bbg70-odjphaoh6bna0-2lo46iid2f47"  style="display: flex; justify-content: left; align-items: center; width: 100%; height: 88px; border-bottom: 1px solid rgb(75, 75, 75); border-top: 1px solid rgb(75, 75, 75); border-left: unset; border-right: unset;"></div></div>
4

what should be the expected output from the function given this class?

5

The one I provided to escape the number and return the result in the form .\792o42ho1jo5, in order to find an element of this class.

6

I’m confused, what are you escaping? the 7 doesn’t need to be escaped, it’s fine like that

7

I don’t understand English and I use a translator, there are probably changes in the meaning of some words and we can’t really reach an agreement because of it.

8

probably. You say you are escaping a character, but numbers do not need to be escaped. Selector .\792o42ho1jo5 will select class="\792o42ho1jo5" . Is this what you want?

What is the goal of your function?

9

When I want to find an element using the queryselector method and its class starts with numbers, they must be escaped. I simply want to find an element using any class, but since the queryselector method does not accept a class that begins with numbers, it must be modified because this is how the browser interprets the selector incorrectly. The rest is logical, as in CSS itself you cannot use numbers at the beginning of the class, especially in the queryselector method. When I use numbers in a CSS class at the beginning, I receive, for example, the error “at-rule or selector expected”.

10

are you sure you can? because a valid css selector doesn’t start with a number

11

What I’m saying is that in CSS you can’t use numbers at the beginning of a class.

12

exactly, you can’t. So if you can’t, I don’t think using querySelector, which uses css selectors, will change that you can’t

use the attribute selector, it looks like that works

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.