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. You might also like his React course.
$ npm install query-string
constqueryString=require('query-string');console.log(location.search);//=> '?foo=bar'constparsed=queryString.parse(location.search);console.log(parsed);//=> {foo: 'bar'}console.log(location.hash);//=> '#token=bada55cafe'constparsedHash=queryString.parse(location.hash);console.log(parsedHash);//=> {token: 'bada55cafe'}parsed.foo='unicorn';parsed.ilike='pizza';conststringified=queryString.stringify(parsed);//=> 'foo=unicorn&ilike=pizza'location.search=stringified;// note that `location.search` automatically prepends a question markconsole.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.
URI components are decoded with decode-uri-component.
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:
queryString.parse('foo[]=1&foo[]=2&foo[]=3',{arrayFormat: 'bracket'});//=> foo: [1,2,3]index: stands for parsing taking the index into account, such as:
queryString.parse('foo[0]=1&foo[1]=2&foo[3]=3',{arrayFormat: 'index'});//=> foo: [1,2,3]none: is the default option and removes any bracket representation, such as:
queryString.parse('foo=1&foo=2&foo=3');//=> foo: [1,2,3]Stringify an object into a query string, sorting the keys.
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.
Type: boolean
Default: true
URL encode the keys and values.
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:
queryString.stringify({foo: [1,2,3]},{arrayFormat: 'bracket'});// => foo[]=1&foo[]=2&foo[]=3index: stands for parsing taking the index into account, such as:
queryString.stringify({foo: [1,2,3]},{arrayFormat: 'index'});// => foo[0]=1&foo[1]=2&foo[3]=3none: is the default option and removes any bracket representation, such as:
queryString.stringify({foo: [1,2,3]});// => foo=1&foo=2&foo=3Extract a query string from a URL that can be passed into .parse().
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:
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:
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'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:
queryString.stringify({foo: false});//=> 'foo=false'queryString.stringify({foo: null});//=> 'foo'queryString.stringify({foo: undefined});//=> ''MIT © Sindre Sorhus