Convert a Query String to an Object using JavaScript

avatar

Borislav Hadzhiev

Last updated: Dec 23, 2021

banner

Check out my new book

Convert a Query String to an Object #

Use the URLSearchParams constructor to convert a query string to an object, e.g. const obj = new URLSearchParams('?page=3&filter=js'). The constructor returns an object instance from which we can access the query string parameters using the get() method, e.g. obj.get('page').

index.js
const queryString = '?page=3&filter=js'; const obj = new URLSearchParams(queryString); // ✅ Get query parameters from the object console.log(obj.get('page')); // 👉️ "3" console.log(obj.get('filter')); // 👉️ "js" // ✅ Check if object contains query parameter console.log(obj.has('page')); // 👉️ true console.log(obj.has('test')); // 👉️ false // ✅ Set new query parameters on the object obj.set('limit', 10); console.log(obj.get('limit')); // 👉️ "10" // ✅ Get the Query String equivalent of the object // 👇️ "page=3&filter=js&limit=10" console.log(obj.toString());

The URLSearchParams takes a query string as a parameter, but if you have an entire URL, you can use this approach instead.

index.js
const url = new URL('https://example.com?page=3&filter=js'); const obj = new URLSearchParams(url.search); console.log(obj.get('page')); // 👉️ "3" console.log(obj.get('filter')); // 👉️ "js"
If you want to convert the URLSearchParams object to a native JavaScript object, pass the object instance to the Object.fromEntries method.
index.js
// ✅ If you have Query String const queryString = '?page=3&filter=js'; const obj1 = Object.fromEntries(new URLSearchParams(queryString)); // 👇️ {page: '3', filter: 'js'} console.log(obj1); // ✅ If you have entire URL const url = new URL('https://example.com?page=3&filter=js'); const obj2 = Object.fromEntries(new URLSearchParams(url.search)); // 👇️ {page: '3', filter: 'js'} console.log(obj2);

However, you probably don't need to convert the return value of the URLSearchParams constructor to a native object, as it implements many convenient methods.

The URLSearchParams.get method takes the name of the query parameter and returns the corresponding value if the parameter is found, otherwise null is returned.

Note that the value returned from the get() method has a type of string. If you need to convert the value to a number, you can pass it to the Number object, e.g. const pageNum = Number(page);.

If you need to check whether the query parameter is contained in the object, you can use the URLSearchParams.has method, which takes the name of the parameter and returns true if the parameter is present and false otherwise.

You can use the URLSearchParams.set method if you need to add query parameters to the object.

The set() method takes 2 parameters:

  • the name of the parameter to set
  • the value of the parameter

When you need to get the equivalent query string, you just need to call the URLSearchParams.toString() method.

Note that the toString() method returns a query string without the question mark. This means that you would probably have to add the question mark if appending the result to a URL.
index.js
// 👇️ "page=3&filter=js&limit=10" console.log(obj.toString()); const withQuestionMark = '?' + obj.toString(); // 👇️ "?page=2&filter=js&limit=10" console.log(withQuestionMark);

The object returned from the URLSearchParams() constructor implements many of the commonly used array methods, e.g. keys(), values() and forEach().

index.js
const queryString = '?page=3&filter=js'; const obj = new URLSearchParams(queryString); const keys = obj.keys(); console.log(keys); // 👉️ (iterator) {'page', 'filter'} const values = obj.values(); console.log(values); // 👉️ (iterator) {'3', 'js'}

If you need to iterate over the object, you can use the URLSearchParams.forEach method.

index.js
const queryString = '?page=3&filter=js'; const obj = new URLSearchParams(queryString); obj.forEach((value, key) => { console.log(value); // 👉️ "3", "js" console.log(key); // 👉️ "page", "filter" });

The forEach method takes a function, which it invokes for every key-value pair in the object of query parameters.

The first parameter the function is passed is the value and the second - the key of the query parameter.

Use the search field on my Home Page to filter through my more than 3,000 articles.