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
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()
Outputhttps://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9
{"param_1":"val_1","x":"7","y":"9"} 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()
Outputhttps://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9
{"param_1":"val_1", "x":"7", "y":"9"} [Function (anonymous)] - 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' }
Similar Reads
How to Pass Object as Parameter in JavaScript ? We'll see how to Pass an object as a Parameter in JavaScript. We can pass objects as parameters to functions just like we do with any other data type. passing objects as parameters to functions allows us to manipulate their properties within the function. These are the following approaches: Table of
3 min read
How to get an object containing parameters of current URL in JavaScript ? The purpose of this article is to get an object which contains the parameter of the current URL. Example: Input: www.geeksforgeeks.org/search?name=john&age=27 Output: { name: "john", age: 27 } Input: geeksforgeeks.org Output: {} To achieve this, we follow the following steps. Create an empty obj
2 min read
How to convert an object to string using JavaScript ? To convert an object to string using JavaScript we can use the available methods like string constructor, concatenation operator etc. Let's first create a JavaScript object. JavaScript // Input object let obj_to_str = { name: "GeeksForGeeks", city: "Noida", contact: 2488 }; Examp
4 min read
Converting JSON text to JavaScript Object Pre-requisite: JavaScript JSON JSON (JavaScript Object Notation) is a lightweight data-interchange format. As its name suggests, JSON is derived from the JavaScript programming language, but it’s available for use by many languages including Python, Ruby, PHP, and Java and hence, it can be said as l
3 min read
How to Convert Object to Array in JavaScript? In this article, we will learn how to convert an Object to an Array in JavaScript. Given an object, the task is to convert an object to an Array in JavaScript. Objects and Arrays are two fundamental data structures. Sometimes, it's necessary to convert an object to an array for various reasons, such
4 min read