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.,
%20should 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.