Urlsearchparams Javascript Example

Urlsearchparams Javascript Example

5 min read Jun 18, 2024
Urlsearchparams Javascript Example

URLSearchParams in JavaScript: A Complete Guide with Examples

The URLSearchParams interface in JavaScript provides a convenient way to work with query string parameters in URLs. It offers methods for retrieving, adding, deleting, and updating parameters, making it easier to manipulate URL queries.

Here's a comprehensive breakdown of the URLSearchParams interface, along with practical examples:

1. Creating a URLSearchParams Object

You can create a URLSearchParams object in two ways:

a) From a URL string:

const url = 'https://example.com?name=John&age=30';
const params = new URLSearchParams(url);
console.log(params); 
// URLSearchParams { 'name' => 'John', 'age' => '30' }

b) From a string of query parameters:

const params = new URLSearchParams('name=Jane&city=New York');
console.log(params); 
// URLSearchParams { 'name' => 'Jane', 'city' => 'New York' }

2. Accessing Parameters

You can retrieve parameter values using various methods:

a) get(key): Retrieves the value of a specific parameter.

const url = 'https://example.com?name=John&age=30';
const params = new URLSearchParams(url);

const name = params.get('name');
console.log(name); // 'John'

const age = params.get('age');
console.log(age); // '30'

const city = params.get('city');
console.log(city); // null (since 'city' doesn't exist)

b) getAll(key): Retrieves all values associated with a parameter (if multiple values exist).

const url = 'https://example.com?hobbies=coding&hobbies=reading';
const params = new URLSearchParams(url);

const hobbies = params.getAll('hobbies');
console.log(hobbies); // ['coding', 'reading']

c) has(key): Checks if a parameter exists.

const url = 'https://example.com?name=John&age=30';
const params = new URLSearchParams(url);

const hasName = params.has('name');
console.log(hasName); // true

const hasCity = params.has('city');
console.log(hasCity); // false

3. Modifying Parameters

a) append(key, value): Appends a new parameter or adds a value to an existing parameter.

const params = new URLSearchParams('name=John&age=30');

params.append('hobbies', 'coding');
params.append('hobbies', 'reading'); 
console.log(params); 
// URLSearchParams { 'name' => 'John', 'age' => '30', 'hobbies' => 'coding', 'hobbies' => 'reading' }

b) set(key, value): Replaces the value of an existing parameter or adds a new one.

const params = new URLSearchParams('name=John&age=30');

params.set('age', 35); 
console.log(params); 
// URLSearchParams { 'name' => 'John', 'age' => '35' }

params.set('city', 'New York');
console.log(params); 
// URLSearchParams { 'name' => 'John', 'age' => '35', 'city' => 'New York' }

c) delete(key): Removes a parameter.

const params = new URLSearchParams('name=John&age=30');

params.delete('age'); 
console.log(params); 
// URLSearchParams { 'name' => 'John' }

4. Converting to String

a) toString(): Returns a string representation of the URLSearchParams object.

const params = new URLSearchParams('name=John&age=30');
const queryString = params.toString();
console.log(queryString); // 'name=John&age=30'

5. Practical Example: Building Dynamic URLs

const url = 'https://example.com';
const params = new URLSearchParams();

const name = 'Alice';
const age = 25;

params.set('name', name);
params.set('age', age);

const fullUrl = url + '?' + params.toString();
console.log(fullUrl); 
// https://example.com?name=Alice&age=25 

6. Working with URLs

You can use URLSearchParams with the URL object to manipulate the query string of a full URL.

const url = new URL('https://example.com?name=John&age=30');
const params = url.searchParams;

params.set('age', 35); 

console.log(url.href); 
// https://example.com?name=John&age=35

Conclusion

The URLSearchParams interface provides a powerful and straightforward way to handle query string parameters in JavaScript. It simplifies the process of accessing, modifying, and building URLs dynamically, making it a valuable tool for web development.

Related Post