Convert URL parameters to a JavaScript Object

Last Updated : 26 Jul, 2023

Given an URL with parameters, The task is to get those parameters and convert them to a JavaScript Object using javascript. we're going to discuss a few techniques.

Below is the following method to convert URL parameters to a JavaScript Object:

Using replace() Method
Using split() Method
Using for ...of loop

Method 1: Using replace() Method

This method searches a string for a defined value, or a regular expression, and returns a new string with the replaced defined value.

Syntax:

string.replace(searchVal, newvalue)

Example: This example first takes the URL's parameter portion and then uses the replace() method to form an object.

JavaScript

let search = 'https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9';
console.log(search);
search = search.split('?')[1];

function GFG_Fun() {
    console.log('{"' + decodeURI(search)
        .replace(/"/g, '\\"').replace(/&/g, '","')
        .replace(/=/g, '":"') + '"}');
}
GFG_Fun()

Output

https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9
{"param_1":"val_1","x":"7","y":"9"}

Method 2: Using split() Method

This method is used to split a string into an array of substrings and returns the new array.

Syntax:

string.split(separator, limit)

Example: This example implements the same functionality but with a different approach. It first takes the parameter portion of the URL and then uses the replace() method to form an object.

JavaScript

let search = 'https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9';
console.log(search);
search = search.split('?')[1];

function GFG_Fun() {
    console.log('{"' + search.replace(/&/g, '", "')
        .replace(/=/g, '":"') + '"}',
        function (key, value) {
            return key === "" ? value : decodeURIComponent(value)
        });
}
GFG_Fun()

Output

https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9
{"param_1":"val_1", "x":"7", "y":"9"} [Function (anonymous)]

Method 3: Using for ...of loop

In this we use Url.search for getting the parameters
Now that passes as a parameter to the function
Now use the for...of loop for accessing all keys and values

Example:

JavaScript

function paramsToObject(params) {
    const obj = {};
    const para = new URLSearchParams(params);

    for (const [key, value] of para) {
        
        if (obj.hasOwnProperty(key)) {
            if (Array.isArray(obj[key])) {
                obj[key].push(value);
            } else {
                obj[key] = [obj[key], value];
            }
        } else {
            obj[key] = value;
        }
    }

    return obj;
}
let search = 'https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9';
const url = new URL(search);
const params = paramsToObject(url.search);
console.log(params);

Output

{ param_1: 'val_1', x: '7', y: '9' }

PranchalKatiyar

Improve

Article Tags :

Convert URL parameters to a JavaScript Object

Method 1: Using replace() Method

Method 2: Using split() Method

Method 3: Using for ...of loop

Similar Reads

Thank You!

What kind of Experience do you want to share?