Parse and stringify URL query strings---
🔥 Want to strengthen your core JavaScript skills and master ES6?
I would personally recommend this awesome ES6 course by Wes Bos.
Also check out his Node.js, React, Sublime courses.
Install
``` $ npm install query-string ``` This module targets Node.js 6 or later and the latest version of Chrome, Firefox, and Safari. If you want support for older browsers, use version 5:npm install query-string@5
.
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
Usage
```js const queryString = require('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 thatlocation.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)
and thus does not have a prototype
.
decode
Type:boolean
Default:
true
Decode the keys and values. URI components are decoded with decode-uri-component
.
arrayFormat
Type:string
Default:
'none'
Supports both index
for an indexed array representation or bracket
for a bracketed array representation.
bracket
: stands for parsing correctly arrays with bracket representation on the query string, such as:
index
: stands for parsing taking the index into account, such as:
none
: is the default option and removes any bracket representation, such as:
.stringify(object, options)
Stringify an object into a query string, sorting the keys.strict
Type:boolean
Default:
true
Strictly encode URI components with strict-uri-encode. It uses encodeURIComponent
if set to false. You probably don't care about this option.
encode
Type:boolean
Default:
true
URL encode the keys and values.
arrayFormat
Type:string
Default:
'none'
Supports both index
for an indexed array representation or bracket
for a bracketed array representation.
bracket
: stands for parsing correctly arrays with bracket representation on the query string, such as:
index
: stands for parsing taking the index into account, such as:
none
: is the default option and removes any bracket representation, such as:
sort
Type:Function
boolean
Supports both Function
as a custom sorting function or false
to disable sorting.
```js
const order = 'c', 'a', 'b';
queryString.stringify({ a: 1, b: 2, c: 3}, {
sort: (m, n) => order.indexOf(m) >= order.indexOf(n)
});
// => 'c=3&a=1&b=2'
```
```js
queryString.stringify({ b: 1, c: 2, a: 3}, {sort: false});
// => 'c=3&a=1&b=2'
```
If omitted, keys are sorted using Array#sort
, which means, converting them to strings and comparing strings in Unicode code point order.
.extract(string)
Extract a query string from a URL that can be passed into.parse()
.
.parseUrl(string, options)
Extract the URL and the query string as an object. Theoptions
are the same as for .parse()
.
Returns an object with a url
and query
property.
```js
queryString.parseUrl('https://foo.bar?foo=bar');
//=> {url: 'https://foo.bar', query: {foo: 'bar'}}
```
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. You're much better off just converting the object to a JSON string: ```js 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
queryString.parse('likes=cake&name=bob&likes=icecream');
//=> {likes: 'cake', 'icecream', name: 'bob'}
queryString.stringify({color: 'taupe', 'chartreuse', id: '515'});
//=> 'color=chartreuse&color=taupe&id=515'
```