Hone logo
Hone
Problems

Query String Parser in JavaScript

Many web applications rely on passing data through the URL using query strings. This challenge asks you to build a JavaScript function that parses a query string and transforms it into a JavaScript object. This is a fundamental skill for handling URL parameters and building dynamic web applications.

Problem Description

You need to create a function called parseQueryString that takes a query string as input and returns a JavaScript object. The query string will consist of key-value pairs separated by ampersands (&). Each key-value pair will be separated by an equals sign (=). The function should handle URL-encoded characters correctly (e.g., %20 for a space). If a key appears multiple times, the value should be an array of values.

Key Requirements:

  • Input: A string representing a query string (e.g., "name=John&age=30&city=New%20York&name=Jane").
  • Output: A JavaScript object where keys are the query parameter names and values are the corresponding query parameter values. If a key appears multiple times, the value should be an array of strings.
  • URL Decoding: The function must decode URL-encoded characters (e.g., %20 should be converted to a space).
  • Empty Query String: If the input is an empty string or a string without any query parameters (e.g., "/path"), the function should return an empty object.

Expected Behavior:

The function should correctly parse the query string and return an object with the appropriate key-value pairs. It should handle edge cases such as empty values, multiple occurrences of the same key, and URL-encoded characters.

Edge Cases to Consider:

  • Empty query string: "" or /path
  • Query string with only a key: name=
  • Query string with multiple keys and values: name=John&age=30
  • Query string with URL-encoded characters: city=New%20York
  • Query string with multiple occurrences of the same key: name=John&name=Jane
  • Query string with empty values: key1=&key2=
  • Query string with special characters in keys or values (e.g., key+value=test) - treat these as literal characters.

Examples

Example 1:

Input: "name=John&age=30&city=New%20York"
Output: { name: "John", age: "30", city: "New York" }
Explanation: The query string is parsed into a simple object with key-value pairs. URL-encoded characters are decoded.

Example 2:

Input: "name=John&name=Jane&age=30"
Output: { name: [ 'John', 'Jane' ], age: '30' }
Explanation: The key "name" appears twice, so its value is an array containing both values.

Example 3:

Input: ""
Output: {}
Explanation: An empty query string results in an empty object.

Example 4:

Input: "key1=&key2="
Output: { key1: '', key2: '' }
Explanation: Handles empty values correctly.

Constraints

  • The input query string will be a string.
  • The query string may contain any valid URL characters.
  • The function must return a JavaScript object.
  • The function should be reasonably efficient for typical query string lengths (up to a few hundred characters). Performance is not the primary concern, but avoid excessively inefficient algorithms.

Notes

  • You can use the decodeURIComponent() function to decode URL-encoded characters.
  • Consider splitting the query string into key-value pairs and then processing each pair individually.
  • Think about how to handle the case where a key appears multiple times. You might need to use an array to store the values.
  • Remember to handle edge cases carefully to ensure the function behaves correctly in all situations.
  • The order of keys in the resulting object is not important.
Loading editor...
javascript