I’m working with SVG elements in a TypeScript project and need to query foreignObject
elements by their parent g
element’s IDs. Some of these IDs start with a digit, so I’m using a function to escape the ID appropriately for use in document.querySelector
.
However, I’m encountering an issue where the escaped ID seems to be represented with double backslashes in the debugger, leading to query selection failures.
In the SVG structure:
<g id="3735df69-8da5-45a9-8580-ffd0e50b3111" transform="translate(200,200)">...</g>
<g id="080640d2-e040-4c6b-b943-7311327f8129" transform="translate(300,200)">...</g>
And here is the function I’m using to sanitize the IDs:
function sanitizeId(id: string) {
if (/^d/.test(id)) {
return id.replace(/^(d)/, "\3$1 ").replace(/([^w-])/g, "\$1");
} else {
return id;
}
}
const selector = `#${sanitizeId(props.__rd3t.id)} foreignObject`;
const foreignObject = document.querySelector(String(selector));
When I console.log the selector, I see the following output:
#\33 735df69-8da5-45a9-8580-ffd0e50b3111 foreignObject
However, in the debugger, the selector evaluates to:
#\\33\ 735df69-8da5-45a9-8580-ffd0e50b3111 foreignObject
I’m confused about why the escaped ID is showing up with double backslashes in the debugger and how this affects document.querySelector. How can I correctly escape these numeric IDs for use in CSS selectors in TypeScript? Any insights or suggestions would be greatly appreciated.