# query-string > Parse and stringify URL [query strings](https://en.wikipedia.org/wiki/Query_string)
---

^{My open source work is supported by the community}

^{Special thanks to:}

Strapi is the leading open-source headless CMS.

^{It’s 100% JavaScript, fully customizable, and developer-first.}

---
## Install ```sh npm install query-string ``` > [!WARNING] > Remember the hyphen! Do not install the deprecated [`querystring`](https://github.com/Gozala/querystring) package! For browser usage, this package targets the latest version of Chrome, Firefox, and Safari. ## Usage ```js 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' ``` ## API ### .parse(string, options?) 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)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) and thus does not have a `prototype`. #### options Type: `object` ##### decode Type: `boolean`\ Default: `true` Decode the keys and values. URL components are decoded with [`decode-uri-component`](https://github.com/SamVerschueren/decode-uri-component). ##### arrayFormat Type: `string`\ Default: `'none'` - `'bracket'`: Parse arrays with bracket representation: ```js 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: ```js import queryString from 'query-string'; queryString.parse('foo[0]=1&foo[1]=2&foo[3]=3', {arrayFormat: 'index'}); //=> {foo: ['1', '2', '3']} ``` - `'comma'`: Parse arrays with elements separated by comma: ```js import queryString from 'query-string'; queryString.parse('foo=1,2,3', {arrayFormat: 'comma'}); //=> {foo: ['1', '2', '3']} ``` - `'separator'`: Parse arrays with elements separated by a custom character: ```js 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: ```js 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: '|'}); //=> {foo: ['1', '2', '3'], bar: 'fluffy', baz:['4']} ``` - `'colon-list-separator'`: Parse arrays with parameter names that are explicitly marked with `:list`: ```js 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: ```js import queryString from 'query-string'; queryString.parse('foo=1&foo=2&foo=3'); //=> {foo: ['1', '2', '3']} ``` ##### arrayFormatSeparator Type: `string`\ Default: `','` The character used to separate array elements when using `{arrayFormat: 'separator'}`. ##### sort Type: `Function | boolean`\ Default: `true` Supports both `Function` as a custom sorting function or `false` to disable sorting. ##### parseNumbers Type: `boolean`\ Default: `false` ```js 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. ##### parseBooleans Type: `boolean`\ Default: `false` ```js 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. ### .stringify(object, options?) Stringify an object into a query string and sorting the keys. #### options Type: `object` ##### strict Type: `boolean`\ Default: `true` Strictly encode URI components. It uses [encodeURIComponent](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) if set to false. You probably [don't care](https://github.com/sindresorhus/query-string/issues/42) about this option. ##### encode Type: `boolean`\ Default: `true` [URL encode](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) the keys and values. ##### arrayFormat Type: `string`\ Default: `'none'` - `'bracket'`: Serialize arrays using bracket representation: ```js 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: ```js 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: ```js 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,,')` would return `{foo: [1, '', '']}`. ``` - `'separator'`: Serialize arrays by separating elements with a custom character: ```js 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: ```js 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: '|'}); //=> 'foo[]=1|2|3&bar=fluffy&baz[]=4' ``` - `'colon-list-separator'`: Serialize arrays with parameter names that are explicitly marked with `:list`: ```js 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: ```js import queryString from 'query-string'; queryString.stringify({foo: [1, 2, 3]}); //=> 'foo=1&foo=2&foo=3' ``` ##### arrayFormatSeparator Type: `string`\ Default: `','` The character used to separate array elements when using `{arrayFormat: 'separator'}`. ##### sort Type: `Function | boolean` Supports both `Function` as a custom sorting function or `false` to disable sorting. ```js 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' ``` ```js 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()`, which means, converting them to strings and comparing strings in Unicode code point order. ##### skipNull Skip keys with `null` as the value. Note that keys with `undefined` as the value are always skipped. Type: `boolean`\ Default: `false` ```js import queryString from 'query-string'; queryString.stringify({a: 1, b: undefined, c: null, d: 4}, { skipNull: true }); //=> 'a=1&d=4' ``` ```js import queryString from 'query-string'; queryString.stringify({a: undefined, b: null}, { skipNull: true }); //=> '' ``` ##### skipEmptyString Skip keys with an empty string as the value. Type: `boolean`\ Default: `false` ```js import queryString from 'query-string'; queryString.stringify({a: 1, b: '', c: '', d: 4}, { skipEmptyString: true }); //=> 'a=1&d=4' ``` ```js import queryString from 'query-string'; queryString.stringify({a: '', b: ''}, { skipEmptyString: true }); //=> '' ``` ### .extract(string) Extract a query string from a URL that can be passed into `.parse()`. Note: This behaviour can be changed with the `skipNull` option. ### .parseUrl(string, options?) Extract the URL and the query string as an object. Returns an object with a `url` and `query` property. If the `parseFragmentIdentifier` option is `true`, the object will also contain a `fragmentIdentifier` property. ```js 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'} ``` #### options Type: `object` The options are the same as for `.parse()`. Extra options are as below. ##### parseFragmentIdentifier Parse the fragment identifier from the URL. Type: `boolean`\ Default: `false` ```js import queryString from 'query-string'; queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true}); //=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'} ``` ### .stringifyUrl(object, options?) Stringify an object into a URL with a query string and sorting the keys. The inverse of [`.parseUrl()`](https://github.com/sindresorhus/query-string#parseurlstring-options) 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 `fragmentIdentifier` property overrides the fragment identifier in the `url` property. ```js 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' ``` #### object Type: `object` ##### url Type: `string` The URL to stringify. ##### query Type: `object` Query items to add to the URL. ### .pick(url, keys, options?) ### .pick(url, filter, options?) Pick query parameters from a URL. Returns a string with the new URL. ```js 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(url, keys, options?) ### .exclude(url, filter, options?) Exclude query parameters from a URL. Returns a string with the new URL. ```js 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' ``` #### url Type: `string` The URL containing the query parameters to filter. #### keys Type: `string[]` The names of the query parameters to filter based on the function used. #### filter Type: `(key, value) => boolean` A filter predicate that will be provided the name of each query parameter and its value. The `parseNumbers` and `parseBooleans` options also affect `value`. #### options Type: `object` [Parse options](#options) and [stringify options](#options-1). ## Nesting This module intentionally doesn't support nesting as it's not spec'd and varies between implementations, which causes a lot of [edge cases](https://github.com/visionmedia/node-querystring/issues). You're much better off just converting the object to a JSON string: ```js 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: ```js 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' ``` ## Falsy values 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: ```js import queryString from 'query-string'; queryString.stringify({foo: false}); //=> 'foo=false' queryString.stringify({foo: null}); //=> 'foo' queryString.stringify({foo: undefined}); //=> '' ``` ## FAQ ### Why is it parsing `+` as a space? See [this answer](https://github.com/sindresorhus/query-string/issues/305).

	Stars	Issues	Version	Updated	Created
parseurl	189	1	1.3.3	5 years ago	10 years ago
query-string			9.0.0	2 months ago	10 years ago
querystringify	176	0	2.2.0	4 years ago	9 years ago
uri-js			4.4.1	3 years ago	12 years ago
urijs	6,256	103	1.19.11	2 years ago	9 years ago

parseurl vs query-string vs querystringify vs uri-js vs urijs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past