Querystring Helper 1: Implement `parseQueryString`

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Implement parseQueryString(qs) that converts a URL querystring into a plain object. This is very common in frontend work (filters, pagination, deep links) and shows up in interviews. Rules (Easy version): 1) Input may start with ?. 2) Pairs are separated by &. 3) Each pair is key=value. 4) Decode percent-encoding with decodeURIComponent. 5) + should be treated as a space. 6) If a key appears multiple times, keep the last value. 7) If a pair is missing =, treat value as empty string. 8) Empty keys should be ignored. No arrays, no nested objects in this version.

Arguments

qs: string — Querystring like "?a=1&b=two" or "a=1".

Returns

Record<string, string> —

An object mapping each key to its decoded string value.

Examples

parseQueryString('?a=1&b=two'); // => { a: '1', b: 'two' }

parseQueryString('q=hello+world'); // => { q: 'hello world' }

parseQueryString('a=1&a=2'); // => { a: '2' }

parseQueryString('flag'); // => { flag: '' }

Solution

Overview

Normalize a querystring into key/value pairs, decode each piece, and build an object where later keys overwrite earlier ones. Handle leading ?, treat + as space, ignore empty keys, and treat missing = as an empty string. This is a realistic parsing task used for filters, pagination, and deep links.

Approach: Split + decode (recommended)

Detailed steps:

1) Strip a leading ? and return {} for an empty string.

2) Split the string by & into raw pairs.

3) For each pair, split on the first = only (so values can contain =). If no =, use '' as the value.

4) Replace + with spaces in both key and value, then decode with decodeURIComponent.

5) Skip empty keys; otherwise assign into the result object (overwriting any previous value).

Complexity: O(n) in the query length, O(k) for the number of keys.

function safeDecode(s) {
  // Keep it predictable: if decode fails, return the raw string
  try {
    return decodeURIComponent(s);
  } catch {
    return s;
  }
}

export default function parseQueryString(qs) {
  if (typeof qs !== 'string') return {};

  const raw = qs.startsWith('?') ? qs.slice(1) : qs;
  if (!raw) return {};

  const out = {};

  for (const part of raw.split('&')) {
    if (!part) continue;

    const eq = part.indexOf('=');
    const kRaw = eq === -1 ? part : part.slice(0, eq);
    const vRaw = eq === -1 ? '' : part.slice(eq + 1);

    const k = safeDecode(kRaw.replace(/\+/g, ' ')).trim();
    if (!k) continue;

    const v = safeDecode(vRaw.replace(/\+/g, ' '));
    out[k] = v;
  }

  return out;
}

function safeDecode(s: string): string {
  try {
    return decodeURIComponent(s);
  } catch {
    return s;
  }
}

export default function parseQueryString(qs: string): Record<string, string> {
  if (typeof qs !== 'string') return {};

  const raw = qs.startsWith('?') ? qs.slice(1) : qs;
  if (!raw) return {};

  const out: Record<string, string> = {};

  for (const part of raw.split('&')) {
    if (!part) continue;

    const eq = part.indexOf('=');
    const kRaw = eq === -1 ? part : part.slice(0, eq);
    const vRaw = eq === -1 ? '' : part.slice(eq + 1);

    const k = safeDecode(kRaw.replace(/\+/g, ' ')).trim();
    if (!k) continue;

    const v = safeDecode(vRaw.replace(/\+/g, ' '));
    out[k] = v;
  }

  return out;
}

Notes & Pitfalls

Pitfalls

Forgetting to treat `+` as space (common in querystrings).
Using `split('=')` without limiting to first `=` (values may contain `=`).
Not handling keys without `=` (should map to empty string).
Crashing on malformed percent-encoding (e.g. `%E0%A4`).

Edge cases

`''` or `'?'` => `{}`
`'&&a=1&&'` => `{ a: '1' }`
`'=x&y=1'` => `{ y: '1' }` (empty key ignored)
`'a=%26'` => `{ a: '&' }`

Techniques

Index-based split to preserve `=` in values
Defensive decoding

Common mistakes on this challenge

parseQueryString decoding or overwrite semantics are wrong
This parser should safely decode and keep only the last value for repeated keys.
- Strip optional leading `?`, split by `&`, and skip empty parts.
- Treat no `=` as empty-string value and ignore empty decoded keys.
- Decode `+` as space, use safe decode fallback, and overwrite repeated keys with latest value.

Resources

MDN – decodeURIComponent

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide