query-string

query-string

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

Usage

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 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) and thus does not have a prototype.

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:

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(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:

queryString.stringify({foo: [1,2,3]}, {arrayFormat: 'bracket'});
// => foo[]=1&foo[]=2&foo[]=3

• index: 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]=3

• none: is the default option and removes any bracket representation, such as:

queryString.stringify({foo: [1,2,3]});
// => foo=1&foo=2&foo=3

sort

Type: Function boolean

Supports both Function as a custom sorting function or false to disable sorting.

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'

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.

The options are the same as for .parse().

Returns an object with a url and query property.

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:

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'

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:

queryString.stringify({foo: false});
//=> 'foo=false'

queryString.stringify({foo: null});
//=> 'foo'

queryString.stringify({foo: undefined});
//=> ''

License

MIT © Sindre Sorhus

Similar packages

Other packages similar to query-string

qs

The 'qs' package is a query string parser with nesting support. It is more feature-rich than query-string, allowing for complex structures like nested objects and arrays. However, it might be overkill for simple use cases.

url-search-params

This is a polyfill for the URLSearchParams API which is built into modern browsers. It provides similar functionality to query-string but is designed to mimic the native browser API.

querystringify

querystringify is a small and simple query string parser and stringifier. It is focused on speed and simplicity, and while it has fewer features than query-string, it may be faster in some cases.