How to properly handle URLs in javascript

Written in 2022, 4 years ago. Tools and advice may have moved on since.

When scraping Crowdcast for webinars to add to the Gatsby Data Layer last week we got back some funny looking paths:

/e/gatsby-gotchas-react/register?utm_source=profile&utm_medium=profile_web&utm_campaign=profile`

The search params, i.e.: utm_source, utm_medium etc. should be removed and the path should be transformed into an absolute URL.

We could split the string on ? and add https://www.crowdcast.io, but we can also reach for the Javascript’s built-in URL constructor:

const base = "https://www.crowdcast.io/";
const path =
  "/e/gatsby-gotchas-react/register?utm_source=profile&utm_medium=profile_web&utm_campaign=profile";

const url = new URL(path, base);

Using the URL constructor results in a very useful object describing our URL:

{
  href: 'https://www.crowdcast.io/e/gatsby-gotchas-react/register?utm_source=profile&utm_medium=profile_web&utm_campaign=profile',
  origin: 'https://www.crowdcast.io',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'www.crowdcast.io',
  hostname: 'www.crowdcast.io',
  port: '',
  pathname: '/e/gatsby-gotchas-react/register',
  search: '?utm_source=profile&utm_medium=profile_web&utm_campaign=profile',
  searchParams: URLSearchParams {
    'utm_source' => 'profile',
    'utm_medium' => 'profile_web',
    'utm_campaign' => 'profile' },
  hash: ''
}

To get a “clean” URL add origin and pathname together:

const cleanUrl = url.origin + url.pathname;

You should reach for the URL constructor anytime you need to work on a URL!

Notice, for instance, how it gracefully handled a trailing slash for base. String concatenation base + path in this case would result in an invalid URL with a double slash:

https://www.crowdcast.io/e//gatsby-gotchas-react/register?utm_source=profile&utm_medium=profile_web&utm_campaign=profile

 
All the best,
Queen Raae