You may not need a Library for that: Managing URLs

Photo by Joan Gamell on Unsplash

In the realm of web development, managing and manipulating URLs is a common task. Whether you’re building a dynamic web application or a simple website, handling query parameters and search strings efficiently is crucial.

For many years this would be a pain to do in vanilla JS, and we would usually reach for a library to make it easier. However, new features are being adding to JavaScript year after year.

JavaScript provides a powerful tool for this purpose: the URLSearchParams interface. In this guide, we’ll delve into the depths of URLSearchParams to understand its features and how to leverage them effectively.

By the end of this article, you may find out you don’t need a library for this anymore.

Understanding URLSearchParams

The URLSearchParams interface provides a straightforward way to parse, manipulate, and create query string parameters in a URL. It’s available in modern web browsers and Node.js environments, making it versatile for both client-side and server-side scripting.

Creating URLSearchParams

To create a new instance of URLSearchParams, you can simply pass a query string or an existing URLSearchParams object:

// Creating from a query string

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

// Creating from an existing URLSearchParams object

  const params2 = new URLSearchParams(params1);

Working with Parameters

Once you have a URLSearchParams object, you can perform various operations on its parameters:

// You can retrieve parameter values using the `get()` method:
console.log(params1.get(‘name’)); // Output: John

// To set or update parameter values, you can use the `set()` method:
params1.set(‘name’, ‘Jane’);


// To add new parameters, you can use the `append()` method:
params1.append(‘city’, ‘New York’);


// To remove parameters, you can use the `delete()` method:
params1.delete(‘age’);

/*
 You can iterate over all parameters using a 
 `for…of` loop or the `forEach()` method:
*/

for (const [key, value] of params1) {
   console.log(`${key}: ${value}`);
}

params1.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});


/*
  Once you’ve manipulated the parameters, 
  you can convert the URLSearchParams object back to a 
  query string using the `toString()` method:
*/


console.log(params1.toString()); // Output: name=Jane&city=New%20York

// You'll notice you don't even need to take care of the URL encoding,
// it does it for you!

Practical Examples

Now that we understand the basics on how to use URLSearchParams let’s see how we would use it real examples.

1. Fetch API Integration

Many times you are working with an API that requires you to add on search params to retrieve some kind of data.

Using URLSearchParams makes this pretty easy.

const params = new URLSearchParams();
params.append('search', 'JavaScript');
params.append('page', '1');

fetch(`/api/data?${params}`)
.then(response => response.json())
.then(data => console.log(data));


// async/await

async fetchData() {
  const response = await fetch(`/api/data?${params}`);
  const data = response.json();
  console.log(data);

}

2. Form Data Handling

You may not have thought about using URLSearchParams for handling form data but you can, and it’s pretty handy.

const form = document.querySelector('form');
const formData = new FormData(form);
const params = new URLSearchParams(formData);

fetch('/submit', {
  method: 'POST',
  body: params
})
.then(response => response.json())
.then(data => console.log(data));

// async await

async fetchData() {
  const response = await fetch('/submit', {
      method: 'POST',
      body: params
    });
  const data = response.json();
  console.log(data);
}

Conclusion

For web developers, efficiently managing URL query parameters is essential for creating dynamic and interactive web applications. The URLSearchParams interface provides a powerful and intuitive way to parse, manipulate, and create query strings in JavaScript.

By mastering URLSearchParams, you can streamline your URL handling tasks and build more robust and user-friendly web applications. If you need something more powerful than this, then you probably need a library, however, for most use cases you can grab this.

JavaScript continues to get more powerful each year and add new features that you can use to do many things libraries used to do. So the next time you need to work with URLs, you may not need a library for that.