Parse URL strings with native JavaScript API

Published: · Reading time: 2 min

There’s an easy native way to parse URL strings with JavaScript API.

To do that you’ll need to use the URL interface:

The URL interface is used to parse, construct, normalize, and encode URLs.
MDN

To use this API you’ll need to create a new object via new URL(). This object will hold multiple URL properties and methods which will allow you to later manipulate parts of URL.

const url = 'http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend'
const urlData = new URL(url)

The urlData object will look like this:

{
href: "http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend"
origin: "http://localhost:8888"
protocol: "http:"
username: ""
password: ""
host: "localhost:8888"
hostname: "localhost"
port: "8888"
pathname: "/wp-one/wp-admin/post-new.php"
search: "?post_type=page&vcv-action=frontend"
searchParams: URLSearchParams {}
hash: ""
  __proto__: URL
  href: (...)
  origin: (...)
  protocol: (...)
  username: (...)
  password: (...)
  host: (...)
  hostname: (...)
  port: (...)
  pathname: (...)
  search: (...)
  searchParams: (...)
  hash: (...)
  toJSON: ƒ toJSON()
  toString: ƒ toString()
}

The initial URL string is torn apart and each part is accessible via corresponding property that holds a string value. E.g. the protocol can be accessed via protocol property:

urlData.protocol // 'http:'

The cool thing about it, is that now you can manipulate the search query of the URL via searchParams property which return the URLSearchParams interface.

The URLSearchParams interface can be used to build and manipulate the URL query string.
MDN

Let’s use the existing data to get the part of the search query:

url // 'http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend'

url.searchParams.get('post_type') // 'page'

This interface allows also to delete, set, sort, iterate and more!

The URL interface is availabe in all modern browsers:

Can I Use URL API? Data on support for the URL API feature across the major browsers from caniuse.com.

Like this article? Share it on: