Use The Platform: URL API

Modern web JavaScript provides an intuitive and feature-rich interface to parse, create and edit URLs info.

This page illustrates only the parts that I use the most; for the full spec, have a look at URL and URLSearchParams.

Create a URL

A URL is created by instantiating a new URL instance:

const url = new URL("");

Manage search params

The created object provides an easy interface to add, edit and remove search params; it behaves similarly to Map.


url.searchParams.set("key", "value");
url.searchParams.set("valid", false);
url.searchParams.set("email", "");
url.searchParams.set("extra", 7);




url.searchParams.set("valid", true");

Get your full address back

href, toJSON and toString will all, with minor differences, return a formatted address.

url.href; //
url.toJSON(); // Same as href
url.toString(); // Same as href, but read-only

Interaction with FormData

URLSearchParams accepts a FormData instance as constructor argument.

Let’s use this form as an example:

    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
  <input type="submit" value="Update fields">

FormData parses a form into a Map like interface that URLSearchParams can read and transform to allow easy URL manipulation.

const form = document.querySelector("form");
const data = new FormData(form);
const params = new URLSearchParams(data);
params.toString(); // username=a+username&