Implement wildcard querySelector to extract URL
Problem: Implement a Custom querySelectorAll for a Hidden URL
A webpage conceals a URL by distributing its individual characters across deeply nested DOM elements. Your task is to implement a simplified selector engine, similar to querySelectorAll, but without using the browser's built-in querySelector or querySelectorAll methods.
This custom engine will then be used to locate the hidden character elements and reconstruct the URL.
DOM Snippet Example
<section data-id="23*">
<article data-class="*45">
<div data-tag="*78*">
<b class="ref" value="h"></b>
<b class="ref" value="t"></b>
<b class="ref" value="t"></b>
<b class="ref" value="p"></b>
<!-- ...more <b> nodes each holding one character... -->
</div>
</article>
</section>
Selector Syntax to Support
You must implement the function signature:
function querySelectorAll(root, selector) { /* ... */ }
Where selector is a descendant chain separated by spaces. For example:
section[data-id="23*"] article[data-class="*45"] div[data-tag="*78*"] b.ref
Each segment in the selector chain may contain:
- A tag name (e.g.,
section,div,b) - At most one class (e.g.,
.ref) - At most one attribute filter like
[data-id="PATTERN"]
Attribute filter patterns may include * wildcards:
*matches any string (including empty).- Examples:
"23*"matches"23","230","23abc""*45"matches"45","abc45""*78*"matches"78","a78b","xx78"
Task
- Implement
querySelectorAll(root, selector)to return all matching elements in document order. - Use your implemented function to find all matching
<b class="ref">nodes. - Reconstruct the hidden URL by concatenating the
valueattribute of each found<b>node in their document order.
Output
Return the reconstructed URL as a string.
Constraints / Assumptions
- The DOM is a tree of elements with
tagName,getAttribute(name),classList, andchildren(or equivalent properties). - No commas,
>,+,:nth-child, or other complex CSS features are supported—only the subset described above. - The hidden URL characters appear in the correct order in the DOM traversal order under the matched container.
AI interview prep
Core dilemma
Balancing efficient DOM tree traversal with robust and performant custom string parsing and wildcard pattern matching, all while adhering to strict constraints on allowed browser APIs and ensuring correct document order.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Implement wildcard querySelector to extract URL
Problem: Implement a Custom querySelectorAll for a Hidden URL
A webpage conceals a URL by distributing its individual characters across deeply nested DOM elements. Your task is to implement a simplified selector engine, similar to querySelectorAll, but without using the browser's built-in querySelector or querySelectorAll methods.
This custom engine will then be used to locate the hidden character elements and reconstruct the URL.
DOM Snippet Example
<section data-id="23*">
<article data-class="*45">
<div data-tag="*78*">
<b class="ref" value="h"></b>
<b class="ref" value="t"></b>
<b class="ref" value="t"></b>
<b class="ref" value="p"></b>
<!-- ...more <b> nodes each holding one character... -->
</div>
</article>
</section>
Selector Syntax to Support
You must implement the function signature:
function querySelectorAll(root, selector) { /* ... */ }
Where selector is a descendant chain separated by spaces. For example:
section[data-id="23*"] article[data-class="*45"] div[data-tag="*78*"] b.ref
Each segment in the selector chain may contain:
- A tag name (e.g.,
section,div,b) - At most one class (e.g.,
.ref) - At most one attribute filter like
[data-id="PATTERN"]
Attribute filter patterns may include * wildcards:
*matches any string (including empty).- Examples:
"23*"matches"23","230","23abc""*45"matches"45","abc45""*78*"matches"78","a78b","xx78"
Task
- Implement
querySelectorAll(root, selector)to return all matching elements in document order. - Use your implemented function to find all matching
<b class="ref">nodes. - Reconstruct the hidden URL by concatenating the
valueattribute of each found<b>node in their document order.
Output
Return the reconstructed URL as a string.
Constraints / Assumptions
- The DOM is a tree of elements with
tagName,getAttribute(name),classList, andchildren(or equivalent properties). - No commas,
>,+,:nth-child, or other complex CSS features are supported—only the subset described above. - The hidden URL characters appear in the correct order in the DOM traversal order under the matched container.