Parse and stringify URL query strings
npm install query-string
[!WARNING]
Remember the hyphen! Do not install the deprecatedquerystringpackage!
For browser usage, this package targets the latest version of Chrome, Firefox, and Safari.
[!TIP]
Consider usingURLSearchParamsfor simple use cases. It's a native browser API that handles basic query string operations.
import queryString from 'query-string';
console.log(location.search);
//=> '?foo=bar'
const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
console.log(location.hash);
//=> '#token=bada55cafe'
const parsedHash = queryString.parse(location.hash);
console.log(parsedHash);
//=> {token: 'bada55cafe'}
parsed.foo = 'unicorn';
parsed.ilike = 'pizza';
const stringified = queryString.stringify(parsed);
//=> 'foo=unicorn&ilike=pizza'
location.search = stringified;
// note that `location.search` automatically prepends a question mark
console.log(location.search);
//=> '?foo=unicorn&ilike=pizza'
Parse a query string into an object. Leading ? or # are ignored, so you can pass location.search or location.hash directly.
The returned object is created with Object.create(null) and thus does not have a prototype.
queryString.parse('?foo=bar');
//=> {foo: 'bar'}
queryString.parse('#token=secret&name=john');
//=> {name: 'john', token: 'secret'}
Type: object
Type: boolean
Default: true
Decode the keys and values. A byte that is not valid UTF-8 becomes the replacement character U+FFFD, and the bytes around it are still decoded, like the URL parser and URLSearchParams do. A % that is not followed by two hexadecimal digits is not an escape and is kept as it is.
Type: string
Default: 'none'
'bracket': Parse arrays with bracket representation:import queryString from 'query-string';
queryString.parse('foo[]=1&foo[]=2&foo[]=3', {arrayFormat: 'bracket'});
//=> {foo: ['1', '2', '3']}
'index': Parse arrays with index representation:import queryString from 'query-string';
queryString.parse('foo[0]=1&foo[1]=2&foo[3]=3', {arrayFormat: 'index'});
//=> {foo: ['1', '2', '3']}
Entries without an index, such as foo[], are appended after the highest index seen so far. Appending after an index greater than or equal to Number.MAX_SAFE_INTEGER is unsupported.
'comma': Parse arrays with elements separated by comma:import queryString from 'query-string';
queryString.parse('foo=1,2,3', {arrayFormat: 'comma'});
//=> {foo: ['1', '2', '3']}
queryString.parse('foo=1,2&foo=3', {arrayFormat: 'comma'});
//=> {foo: ['1', '2', '3']}
A single value has no separator, so it is a plain value, not an array with one element. Use the types option to always get an array, or use 'bracket-separator', which marks arrays explicitly.
import queryString from 'query-string';
queryString.parse('foo=1', {arrayFormat: 'comma'});
//=> {foo: '1'}
queryString.parse('foo=1', {arrayFormat: 'comma', types: {foo: 'string[]'}});
//=> {foo: ['1']}
'separator': Parse arrays with elements separated by a custom character:import queryString from 'query-string';
queryString.parse('foo=1|2|3', {arrayFormat: 'separator', arrayFormatSeparator: '|'});
//=> {foo: ['1', '2', '3']}
'bracket-separator': Parse arrays (that are explicitly marked with brackets) with elements separated by a custom character:import queryString from 'query-string';
queryString.parse('foo[]', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: []}
queryString.parse('foo[]=', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: ['']}
queryString.parse('foo[]=1', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: ['1']}
queryString.parse('foo[]=1|2|3', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: ['1', '2', '3']}
queryString.parse('foo[]=1||3|||6', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: ['1', '', '3', '', '', '6']}
queryString.parse('foo[]=1|2|3&bar=fluffy&baz[]=4', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {bar: 'fluffy', baz: ['4'], foo: ['1', '2', '3']}
'colon-list-separator': Parse arrays with parameter names that are explicitly marked with :list:import queryString from 'query-string';
queryString.parse('foo:list=one&foo:list=two', {arrayFormat: 'colon-list-separator'});
//=> {foo: ['one', 'two']}
'none': Parse arrays with elements using duplicate keys:import queryString from 'query-string';
queryString.parse('foo=1&foo=2&foo=3');
//=> {foo: ['1', '2', '3']}
Type: string
Default: ','
The character used to separate array elements when using {arrayFormat: 'separator'}.
Only a literal separator delimits array elements. A percent-encoded separator (for example, %2C) is part of the element, which is how .stringify() encodes elements that contain the separator. Because of this, % and a hexadecimal digit are unsupported, since those also appear inside percent-encoded elements, and so are &, +, and #, since those already have a meaning in a URL: & separates parameters, + is decoded as a space, and # starts the fragment identifier. Those are handled on a best-effort basis, so the result is undefined. Whitespace cannot work at all, since leading and trailing whitespace is ignored when parsing, and a lone surrogate cannot be percent-encoded, so both throw a TypeError.
import queryString from 'query-string';
queryString.parse('foo=a%2Cb,c', {arrayFormat: 'comma'});
//=> {foo: ['a,b', 'c']}
queryString.parse('foo[]=a%2Cb,c', {arrayFormat: 'bracket-separator'});
//=> {foo: ['a,b', 'c']}
Type: Function | boolean
Default: true
Supports both Function as a custom sorting function or false to disable sorting.
If omitted, keys are sorted using Array#sort().
Type: boolean
Default: false
import queryString from 'query-string';
queryString.parse('foo=1', {parseNumbers: true});
//=> {foo: 1}
Parse the value as a number type instead of string type if it's a number.
Type: boolean
Default: false
import queryString from 'query-string';
queryString.parse('foo=true', {parseBooleans: true});
//=> {foo: true}
Parse the value as a boolean type instead of string type if it's a boolean.
Type: object
Default: {}
Specifies a schema for parsing query values with explicit type declarations. When defined, the types provided here take precedence over general parsing options such as parseNumbers, parseBooleans, and arrayFormat.
Use this option to explicitly define the type of a specific parameter—particularly useful in cases where the type might otherwise be ambiguous (e.g., phone numbers or IDs).
You can also provide a custom function to transform the value. The function will receive the raw string and should return the desired parsed result. When used with array formats (like comma, separator, bracket, etc.), the function is applied to each array element individually.
Supported Types:
'boolean': Parse flagged as a boolean (overriding the parseBooleans option):import queryString from 'query-string';
queryString.parse('?isAdmin=true&flagged=true&isOkay=0', {
parseBooleans: false,
types: {
flagged: 'boolean',
isOkay: 'boolean',
},
});
//=> {flagged: true, isAdmin: 'true', isOkay: false}
Note: The 'boolean' type also converts '0' and '1' to booleans, and treats valueless keys (e.g. ?flag) as true.
'string': Parse phoneNumber as a string (overriding the parseNumbers option):import queryString from 'query-string';
queryString.parse('?phoneNumber=%2B380951234567&id=1', {
parseNumbers: true,
types: {
phoneNumber: 'string',
}
});
//=> {id: 1, phoneNumber: '+380951234567'}
'number': Parse age as a number (even when parseNumbers is false):import queryString from 'query-string';
queryString.parse('?age=20&id=01234&zipcode=90210', {
types: {
age: 'number',
}
});
//=> {age: 20, id: '01234', zipcode: '90210'}
'string[]': Parse items as an array of strings (overriding the parseNumbers option):import queryString from 'query-string';
queryString.parse('?age=20&items=1,2,3', {
arrayFormat: 'comma',
parseNumbers: true,
types: {
items: 'string[]',
}
});
//=> {age: 20, items: ['1', '2', '3']}
'number[]': Parse items as an array of numbers (even when parseNumbers is false):import queryString from 'query-string';
queryString.parse('?age=20&items=1,2,3', {
arrayFormat: 'comma',
types: {
items: 'number[]',
}
});
//=> {age: '20', items: [1, 2, 3]}
'Function': Provide a custom function as the parameter type. The parameter's value will equal the function's return value. When used with array formats (like comma, separator, bracket, etc.), the function is applied to each array element individually.import queryString from 'query-string';
queryString.parse('?age=20&id=01234&zipcode=90210', {
types: {
age: value => value * 2,
}
});
//=> {age: 40, id: '01234', zipcode: '90210'}
// With arrays, the function is applied to each element
queryString.parse('?scores=10,20,30', {
arrayFormat: 'comma',
types: {
scores: value => Number(value) * 2,
}
});
//=> {scores: [20, 40, 60]}
NOTE: With arrayFormat: 'none', array types (string[], number[]) do not turn a single value into an array. The value stays a string, and parseNumbers and parseBooleans do not apply to it. A repeated key is still an array, and its items are parsed with the element type.
queryString.parse('ids=001,002,003&foods=apple,orange,mango', {
arrayFormat: 'none',
types: {
ids: 'number[]',
foods: 'string[]',
},
});
//=> {foods: 'apple,orange,mango', ids: '001,002,003'}
Stringify an object into a query string and sorting the keys.
Supported value types: string, number, bigint, boolean, null, undefined, and arrays of these types. Other types like Symbol, functions, or objects (except arrays) will throw an error.
Type: object
Type: boolean
Default: true
Strictly encode URI components. It uses encodeURIComponent if set to false. You probably don't care about this option.
Type: boolean
Default: true
URL encode the keys and values.
A lone surrogate, which cannot be percent-encoded, is replaced with the replacement character U+FFFD, like URLSearchParams does.
Type: string
Default: 'none'
'bracket': Serialize arrays using bracket representation:import queryString from 'query-string';
queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'bracket'});
//=> 'foo[]=1&foo[]=2&foo[]=3'
'index': Serialize arrays using index representation:import queryString from 'query-string';
queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'index'});
//=> 'foo[0]=1&foo[1]=2&foo[2]=3'
'comma': Serialize arrays by separating elements with comma:import queryString from 'query-string';
queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'comma'});
//=> 'foo=1,2,3'
queryString.stringify({foo: [1, null, '']}, {arrayFormat: 'comma'});
//=> 'foo=1,,'
// Note that typing information for null values is lost
// and `.parse('foo=1,,', {arrayFormat: 'comma'})` would return `{foo: ['1', '', '']}`.
'separator': Serialize arrays by separating elements with a custom character:import queryString from 'query-string';
queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'separator', arrayFormatSeparator: '|'});
//=> 'foo=1|2|3'
'bracket-separator': Serialize arrays by explicitly post-fixing array names with brackets and separating elements with a custom character:import queryString from 'query-string';
queryString.stringify({foo: []}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'foo[]'
queryString.stringify({foo: ['']}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'foo[]='
queryString.stringify({foo: [1]}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'foo[]=1'
queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'foo[]=1|2|3'
queryString.stringify({foo: [1, '', 3, null, null, 6]}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'foo[]=1||3|||6'
queryString.stringify({foo: [1, '', 3, null, null, 6]}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|', skipNull: true});
//=> 'foo[]=1||3|6'
queryString.stringify({foo: [1, 2, 3], bar: 'fluffy', baz: [4]}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> 'bar=fluffy&baz[]=4&foo[]=1|2|3'
'colon-list-separator': Serialize arrays with parameter names that are explicitly marked with :list:import queryString from 'query-string';
queryString.stringify({foo: ['one', 'two']}, {arrayFormat: 'colon-list-separator'});
//=> 'foo:list=one&foo:list=two'
'none': Serialize arrays by using duplicate keys:import queryString from 'query-string';
queryString.stringify({foo: [1, 2, 3]});
//=> 'foo=1&foo=2&foo=3'
Type: string
Default: ','
The character used to separate array elements when using {arrayFormat: 'separator'}.
A separator inside an element is percent-encoded, so .parse() can tell it apart from the separator between elements. With comma and separator, a plain value that contains the separator is percent-encoded the same way, so it does not turn into an array. Because of this, % and a hexadecimal digit are unsupported, since those also appear inside percent-encoded elements, and so are &, +, and #, since those already have a meaning in a URL: & separates parameters, + is decoded as a space, and # starts the fragment identifier. Those are handled on a best-effort basis, so the result is undefined. Whitespace cannot work at all, since leading and trailing whitespace is ignored when parsing, and a lone surrogate cannot be percent-encoded, so both throw a TypeError.
Type: Function | boolean
Default: true
Supports both Function as a custom sorting function or false to disable sorting.
import queryString from 'query-string';
const order = ['c', 'a', 'b'];
queryString.stringify({a: 1, b: 2, c: 3}, {
sort: (a, b) => order.indexOf(a) - order.indexOf(b)
});
//=> 'c=3&a=1&b=2'
import queryString from 'query-string';
queryString.stringify({b: 1, c: 2, a: 3}, {sort: false});
//=> 'b=1&c=2&a=3'
If omitted, keys are sorted using Array#sort().
Skip keys with null as the value.
Note that keys with undefined as the value are always skipped.
Type: boolean
Default: false
import queryString from 'query-string';
queryString.stringify({a: 1, b: undefined, c: null, d: 4}, {
skipNull: true
});
//=> 'a=1&d=4'
import queryString from 'query-string';
queryString.stringify({a: undefined, b: null}, {
skipNull: true
});
//=> ''
Skip keys with an empty string as the value.
Type: boolean
Default: false
import queryString from 'query-string';
queryString.stringify({a: 1, b: '', c: '', d: 4}, {
skipEmptyString: true
});
//=> 'a=1&d=4'
import queryString from 'query-string';
queryString.stringify({a: '', b: ''}, {
skipEmptyString: true
});
//=> ''
A function that transforms key-value pairs before stringification.
Type: function
Default: undefined
Similar to the replacer parameter of JSON.stringify(), this function is called for each key-value pair and can be used to transform values before they are stringified. The function receives the key and value, and should return the transformed value. Returning undefined will omit the key-value pair from the resulting query string. The skipNull and skipEmptyString options apply to the returned value.
This is useful for custom serialization of non-primitive types like Date:
import queryString from 'query-string';
queryString.stringify({
date: new Date('2024-01-15T10:30:00Z'),
name: 'John'
}, {
replacer: (key, value) => {
if (value instanceof Date) {
return value.toISOString();
}
return value;
}
});
//=> 'date=2024-01-15T10%3A30%3A00.000Z&name=John'
You can also use it to filter out keys:
import queryString from 'query-string';
queryString.stringify({
a: 1,
b: null,
c: 3
}, {
replacer: (key, value) => value === null ? undefined : value
});
//=> 'a=1&c=3'
Extract a query string from a URL that can be passed into .parse().
queryString.extract('https://foo.bar?foo=bar');
//=> 'foo=bar'
Extract the URL and the query string as an object. Leading and trailing whitespace is ignored.
Returns an object with a url and query property.
If the parseFragmentIdentifier option is true, the object will also contain a fragmentIdentifier property.
import queryString from 'query-string';
queryString.parseUrl('https://foo.bar?foo=bar');
//=> {url: 'https://foo.bar', query: {foo: 'bar'}}
queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true});
//=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'}
Type: object
The options are the same as for .parse().
Extra options are as below.
Parse the fragment identifier from the URL.
Type: boolean
Default: false
import queryString from 'query-string';
queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true});
//=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'}
Stringify an object into a URL with a query string and sorting the keys. The inverse of .parseUrl()
The options are the same as for .stringify().
Returns a string with the URL and a query string.
Query items in the query property overrides queries in the url property. The query in the url property is written back from its plain string values, so parseNumbers, parseBooleans, and types do not rewrite it when the options are shared with .parseUrl().
With encode: false, an array marker in an existing parameter name is only treated as a marker when it is literal, such as a[], so a percent-encoded marker such as a%5B%5D is not overridden by the plain key. The existing parameter is kept as-is, so overriding a alongside an existing a%5B%5D in the URL writes both a=2&a%5B%5D=1.
The fragmentIdentifier property overrides the fragment identifier in the url property.
queryString.stringifyUrl({url: 'https://foo.bar', query: {foo: 'bar'}});
//=> 'https://foo.bar?foo=bar'
queryString.stringifyUrl({url: 'https://foo.bar?foo=baz', query: {foo: 'bar'}});
//=> 'https://foo.bar?foo=bar'
queryString.stringifyUrl({
url: 'https://foo.bar',
query: {
top: 'foo'
},
fragmentIdentifier: 'bar'
});
//=> 'https://foo.bar?top=foo#bar'
Type: object
Type: string
The URL to stringify. Leading and trailing whitespace is ignored.
Type: object
Query items to add to the URL.
Type: string
The fragment identifier to add to the URL, without the leading #. An empty string removes the fragment identifier from the URL.
Like the query values, it is a decoded value and is percent-encoded when encode is true, so .parseUrl() reads it back unchanged. /, ?, and # are kept as-is, so hash routes like #/users?id=1 work. When encode is false, it is written as-is.
import queryString from 'query-string';
queryString.stringifyUrl({url: 'https://foo.bar', fragmentIdentifier: '100%'});
//=> 'https://foo.bar#100%25'
queryString.stringifyUrl({url: 'https://foo.bar', fragmentIdentifier: '/users?id=1'});
//=> 'https://foo.bar#/users?id=1'
Pick query parameters from a URL.
Returns a string with the new URL. The query parameters are sorted, like with .stringify(). Pass sort: false in the options to keep their order. With sorting disabled, integer-index keys come first in ascending numeric order, following JavaScript object enumeration. Repeated keys are grouped together.
import queryString from 'query-string';
queryString.pick('https://foo.bar?foo=1&bar=2#hello', ['foo']);
//=> 'https://foo.bar?foo=1#hello'
queryString.pick('https://foo.bar?foo=1&bar=2#hello', (name, value) => value === 2, {parseNumbers: true});
//=> 'https://foo.bar?bar=2#hello'
Exclude query parameters from a URL.
Returns a string with the new URL. The query parameters are sorted, like with .stringify(). Pass sort: false in the options to keep their order. With sorting disabled, integer-index keys come first in ascending numeric order, following JavaScript object enumeration. Repeated keys are grouped together.
import queryString from 'query-string';
queryString.exclude('https://foo.bar?foo=1&bar=2#hello', ['foo']);
//=> 'https://foo.bar?bar=2#hello'
queryString.exclude('https://foo.bar?foo=1&bar=2#hello', (name, value) => value === 2, {parseNumbers: true});
//=> 'https://foo.bar?foo=1#hello'
Type: string
The URL containing the query parameters to filter. Leading and trailing whitespace is ignored.
Type: string[]
The names of the query parameters to filter based on the function used.
Type: (key, value) => boolean
A filter predicate that will be provided the name of each query parameter and its value. The parseNumbers, parseBooleans, and types options also affect value. They only affect the value passed to the filter. The query parameters are written back to the URL from the plain string values, so a value like 007 is not rewritten as 7. The query is decoded only when encode is true, so a value like a%20b is not percent-encoded a second time. With encode: false, the filter receives the key and value as they are in the URL. The decode option is ignored. The stringify options apply to the output, so skipNull and skipEmptyString also drop a parameter that the filter kept.
Type: object
Parse options and stringify options.
This module intentionally doesn't support nesting as it's not spec'd and varies between implementations, which causes a lot of edge cases.
You're much better off just converting the object to a JSON string:
import queryString from 'query-string';
queryString.stringify({
foo: 'bar',
nested: JSON.stringify({
unicorn: 'cake'
})
});
//=> 'foo=bar&nested=%7B%22unicorn%22%3A%22cake%22%7D'
However, there is support for multiple instances of the same key:
import queryString from 'query-string';
queryString.parse('likes=cake&name=bob&likes=icecream');
//=> {likes: ['cake', 'icecream'], name: 'bob'}
queryString.stringify({color: ['taupe', 'chartreuse'], id: '515'});
//=> 'color=taupe&color=chartreuse&id=515'
Sometimes you want to unset a key, or maybe just make it present without assigning a value to it. Here is how falsy values are stringified:
import queryString from 'query-string';
queryString.stringify({foo: false});
//=> 'foo=false'
queryString.stringify({foo: null});
//=> 'foo'
queryString.stringify({foo: undefined});
//=> ''
+ as a space?See this answer.