npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

http-query-string

v1.0.1

Published

Parse HTTP Query String to JSON Object, and Build HTTP Query String from JSON Object.

Downloads

26

Readme

http-query-string

Parse HTTP Query String to JSON Object, and Build HTTP Query String from JSON Object.


Install


npm  install  http-query-string

For browser usage, this package targets the latest version of Chrome, Firefox, and Safari.

Usage


import  httpQueryString  from  'http-query-string';

  

console.log(location.search);

//=> '?foo=bar'

  

const  parsed = httpQueryString.parse(location.search);

console.log(parsed);

//=> {foo: 'bar'}

  

console.log(location.hash);

//=> '#token=bada55cafe'

  

const  parsedHash = httpQueryString.parse(location.hash);

console.log(parsedHash);

//=> {token: 'bada55cafe'}

  

parsed.foo = 'unicorn';

parsed.ilike = 'pizza';

  

const  stringified = httpQueryString.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'

let  obj  = {
	"a":1,
	"b":10.5,
	"c":{
		"d":"abcd",
		"e":"pqrs",
		"f":{
			"af":"af0",
			"bf":{
				"a":10,
				"b":20,
				"c":30
			}
		}
	}
}
let  queryStr  =  httpQueryString.stringify(obj);
console.log(queryStr);
//=> 'a=1&b=10.5&c[d]=abcd&c[e]=pqrs&c[f][af]=af0&c[f][bf][a]=10&c[f][bf][b]=20&c[f][bf][c]=30'

obj  =  httpQueryString.parse(queryStr)
console.log(obj);
//=> {"a":1,"b":10.5,"c":{"d":"abcd","e":"pqrs","f":{"af":"af0","bf":{"a":10,"b":20,"c":30}}}}

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.

options

Type: object

decode

Type: boolean\

Default: true

Decode the keys and values. URL components are decoded with decode-uri-component.

arrayFormat

Type: string\

Default: 'none'

  • 'bracket': Parse arrays with bracket representation:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('foo[]=1&foo[]=2&foo[]=3', {arrayFormat:  'bracket'});

//=> {foo: ['1', '2', '3']}
  • 'index': Parse arrays with index representation:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('foo[0]=1&foo[1]=2&foo[3]=3', {arrayFormat:  'index'});

//=> {foo: ['1', '2', '3']}
  • 'comma': Parse arrays with elements separated by comma:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('foo=1,2,3', {arrayFormat:  'comma'});

//=> {foo: ['1', '2', '3']}
  • 'separator': Parse arrays with elements separated by a custom character:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('foo[]', {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> {foo: []}

  

httpQueryString.parse('foo[]=', {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> {foo: ['']}

  

httpQueryString.parse('foo[]=1', {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> {foo: ['1']}

  

httpQueryString.parse('foo[]=1|2|3', {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> {foo: ['1', '2', '3']}

  

httpQueryString.parse('foo[]=1||3|||6', {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> {foo: ['1', '', 3, '', '', '6']}

  

httpQueryString.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:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('foo:list=one&foo:list=two', {arrayFormat:  'colon-list-separator'});

//=> {foo: ['one', 'two']}
  • 'none': Parse arrays with elements using duplicate keys:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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 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'

  • 'bracket': Serialize arrays using bracket representation:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({foo: [1, 2, 3]}, {arrayFormat:  'bracket'});

//=> 'foo[]=1&foo[]=2&foo[]=3'
  • 'index': Serialize arrays using index representation:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({foo: [1, 2, 3]}, {arrayFormat:  'comma'});

//=> 'foo=1,2,3'

  

httpQueryString.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:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({foo: []}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> 'foo[]'

  

httpQueryString.stringify({foo: ['']}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> 'foo[]='

  

httpQueryString.stringify({foo: [1]}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> 'foo[]=1'

  

httpQueryString.stringify({foo: [1, 2, 3]}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> 'foo[]=1|2|3'

  

httpQueryString.stringify({foo: [1, '', 3, null, null, 6]}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|'});

//=> 'foo[]=1||3|||6'

  

httpQueryString.stringify({foo: [1, '', 3, null, null, 6]}, {arrayFormat:  'bracket-separator', arrayFormatSeparator:  '|', skipNull:  true});

//=> 'foo[]=1||3|6'

  

httpQueryString.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:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({foo: ['one', 'two']}, {arrayFormat:  'colon-list-separator'});

//=> 'foo:list=one&foo:list=two'
  • 'none': Serialize arrays by using duplicate keys:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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.


import  httpQueryString  from  'http-query-string';

  

const  order = ['c', 'a', 'b'];

  

httpQueryString.stringify({a:  1, b:  2, c:  3}, {

sort: (a, b) =>  order.indexOf(a) - order.indexOf(b)

});

//=> 'c=3&a=1&b=2'

import  httpQueryString  from  'http-query-string';

  

httpQueryString.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


import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({a:  1, b:  undefined, c:  null, d:  4}, {

skipNull:  true

});

//=> 'a=1&d=4'

import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({a:  undefined, b:  null}, {

skipNull:  true

});

//=> ''
skipEmptyString

Skip keys with an empty string as the value.

Type: boolean\

Default: false


import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({a:  1, b:  '', c:  '', d:  4}, {

skipEmptyString:  true

});

//=> 'a=1&d=4'

import  httpQueryString  from  'http-query-string';

  

httpQueryString.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.


import  httpQueryString  from  'http-query-string';

  

httpQueryString.parseUrl('https://foo.bar?foo=bar');

//=> {url: 'https://foo.bar', query: {foo: 'bar'}}

  

httpQueryString.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


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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()

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.


httpQueryString.stringifyUrl({url:  'https://foo.bar', query: {foo:  'bar'}});

//=> 'https://foo.bar?foo=bar'

  

httpQueryString.stringifyUrl({url:  'https://foo.bar?foo=baz', query: {foo:  'bar'}});

//=> 'https://foo.bar?foo=bar'

  

httpQueryString.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.


import  httpQueryString  from  'http-query-string';

  

httpQueryString.pick('https://foo.bar?foo=1&bar=2#hello', ['foo']);

//=> 'https://foo.bar?foo=1#hello'

  

httpQueryString.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.


import  httpQueryString  from  'http-query-string';

  

httpQueryString.exclude('https://foo.bar?foo=1&bar=2#hello', ['foo']);

//=> 'https://foo.bar?bar=2#hello'

  

httpQueryString.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 and stringify options.

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:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.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  httpQueryString  from  'http-query-string';

  

httpQueryString.parse('likes=cake&name=bob&likes=icecream');

//=> {likes: ['cake', 'icecream'], name: 'bob'}

  

httpQueryString.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:


import  httpQueryString  from  'http-query-string';

  

httpQueryString.stringify({foo:  false});

//=> 'foo=false'

  

httpQueryString.stringify({foo:  null});

//=> 'foo'

  

httpQueryString.stringify({foo:  undefined});

//=> ''

FAQ

Why is it parsing + as a space?

See this answer.