How do I approach Coding & Algorithms interview questions?

Coding & Algorithms questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master coding & algorithms interviews.

What difficulty level is this interview question?

This is a medium difficulty Coding & Algorithms question, commonly asked during Take-home Project rounds at Ramp.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Ramp during technical interviews.

Implement wildcard querySelector to extract URL

Q: Implement wildcard querySelector to extract URL

This question evaluates implementation skills for a simplified selector engine, DOM traversal and manipulation, wildcard attribute pattern matching, and ordered string reconstruction from element attributes.

Problem: Extract a hidden URL from a deeply nested DOM

A webpage hides a URL by splitting it into individual characters stored in DOM elements. The DOM structure is deeply nested, and you are not allowed to use the browser’s built-in querySelector/querySelectorAll.

You must implement a simplified selector engine and use it to locate the hidden characters.

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 you must support

Implement:

function querySelectorAll(root, selector) { /* ... */ }

Where selector is a descendant chain separated by spaces, e.g.

section[data-id="23*"] article[data-class="*45"] div[data-tag="*78*"] b.ref

Each segment 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 it to find all matching <b class="ref"> nodes and reconstruct the URL by concatenating each node’s value attribute in order.

Output

Return the reconstructed URL as a string.

Constraints / assumptions

The DOM is a tree of elements with tagName , getAttribute(name) , classList , and children (or equivalent).
No commas, > , + , :nth-child , or other CSS features—only the subset described above.
The hidden URL characters appear in the correct order in the DOM traversal order under the matched container.

Problem: Extract a hidden URL from a deeply nested DOM

You must implement a simplified selector engine and use it to locate the hidden characters.

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 you must support

Implement:

function querySelectorAll(root, selector) { /* ... */ }

Where selector is a descendant chain separated by spaces, e.g.

section[data-id="23*"] article[data-class="*45"] div[data-tag="*78*"] b.ref

Each segment 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 it to find all matching <b class="ref"> nodes and reconstruct the URL by concatenating each node’s value attribute in order.

Output

Return the reconstructed URL as a string.

Constraints / assumptions

The DOM is a tree of elements with tagName , getAttribute(name) , classList , and children (or equivalent).
No commas, > , + , :nth-child , or other CSS features—only the subset described above.
The hidden URL characters appear in the correct order in the DOM traversal order under the matched container.

Implement wildcard querySelector to extract URL

Quick Overview

Problem: Extract a hidden URL from a deeply nested DOM

DOM snippet (example)

Selector syntax you must support

Task

Output

Constraints / assumptions

Submit Your Answer

Implement wildcard querySelector to extract URL

Quick Overview

Problem: Extract a hidden URL from a deeply nested DOM

DOM snippet (example)

Selector syntax you must support

Task

Output

Constraints / assumptions

Submit Your Answer