Escaping Numeric IDs for QuerySelector – Unexpected Double Backslashes

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.