Back to all snippets
Library/Utilities/Query String Parser
javascriptintermediateurlparsingutilities

How to implement Query String Parser in Javascript

Parse and stringify URL query strings

Quick Answer

`URLSearchParams` is the built-in browser and Node.js API for parsing and building query strings — handling encoding, decoding, and repeated keys automatically.

Code Snippet

1const parseQueryString = (url) => {
2  const params = new URLSearchParams(url.split('?')[1]);
3  return Object.fromEntries(params.entries());
4};
5
6const stringifyQueryString = (params) => {
7  return new URLSearchParams(params).toString();
8};

What is Query String Parser?

URLSearchParams is the native browser and Node.js API for working with URL query strings. It handles encoding and decoding automatically, supports repeated keys, and integrates naturally with the URL API. These two helpers cover the most common operations: parsing a query string into an object and serialising an object back to a query string.

How It Works

  1. 1`url.split('?')[1]` extracts the raw query string from a full URL.
  2. 2`new URLSearchParams(queryString)` parses it into key-value pairs.
  3. 3`Object.fromEntries(params.entries())` converts the iterator to a plain object.
  4. 4`new URLSearchParams(params).toString()` encodes an object back into a query string with proper percent-encoding.

Common Use Cases

  • Search pages - Parse filter and sort parameters from the URL
  • API requests - Build query strings for fetch calls
  • Sharing state - Encode application state in the URL for sharing
  • Redirects - Preserve and forward query parameters

Key Benefits

  • Uses the built-in URLSearchParams — no external library needed
  • Handles URL encoding and decoding automatically
  • Works in both browser and Node.js environments
  • Handles arrays and repeated keys natively

Common Mistakes to Avoid

  • `Object.fromEntries` only keeps the last value for repeated keys — use `params.getAll(key)` if you need arrays.
  • Passing the full URL including the `?` to `new URLSearchParams()` — prefix it with `?` or strip it first.
  • Not encoding special characters manually — `URLSearchParams` handles this for you; don't double-encode.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

How do I handle array parameters in query strings?

Use `params.getAll('key')` to retrieve all values for a repeated key (e.g. `?tag=js&tag=ts`). `Object.fromEntries` only returns the last value per key.

Related Snippets

javascript
beginner
Generate Unique ID
Generate unique identifiers for items
utilitiesidrandom
javascript
beginner
Email Validation
Validate email addresses with regex
validationemailregex
javascript
beginner
Date Formatting
Format dates in various common formats
dateformattingtime

About This Javascript Code Snippet

This free javascript code snippet for query string parser is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement query string parser quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: url, parsing, utilities  | Language: javascript  | Difficulty: intermediate  | Category: Utilities

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets