How to Parse a URL in JavaScript (Complete Guide)

When dealing with URLs in your code, you need a mechanism that easily lets you access the different parts of the URLs.

This is a complete guide to parsing URLs in JavaScript. You will learn how to access the specific parts of your URLs, such as the hostname, file path, or query parameters.

This guide uses the native URL() constructor and its main components.

Here’s a quick reference solution for accessing each main URL component with JavaScript:

// Example URL
const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

// 1: Protocol
URLObject.protocol

// 2: Subdomain
URLObject.hostname.split(".")[0]

// 3: Hostname
URLObject.hostname

// 4: Port
URLObject.port

// 5: Path
URLObject.pathname

// 6: Query parameters
URLObject.search

// 7: Fragment
URLObject.hash

The URL Structure

Here is an illustration of a traditional URL and its main parts.

A typical URL might consist of the following parts:

  1. Protocol.
  2. Subdomain.
  3. Domain Name.
  4. Port.
  5. File Path.
  6. Query Parameters.
  7. Fragment.

Notice that not all parts are specified in all URLs. For example, the port and the fragment are usually not present.

Make sure to read my complete guide to URLs to learn more about URL structures.

JavaScript’s URL() Constructor

In JavaScript, you can use the built-in URL() constructor to handle URLs in your code.

In this guide, I’m mainly going to use the following sample URL:

https://app.example.com:80/favorites/?ref=codingem.com#intro

For instance, here’s an example URL:

Notice how the URL() object picks up the different parts of the URL from the input URL I gave it. On the right-hand side, you can see the textual representation of the URL object.

To access a specific part of the URL object, you can simply use the dot notation to access any of the above URL parts. For example, to get the protocol of the URL, call sampleURL.protocol.

Parsing URL Parts

Let’s take a look at parsing the individual components of a URL separately.

1. Protocol

accessing the protocol of a URL

💡 Protocol is the “first part” of the URL, also known as the scheme. The protocol specifies a set of rules for transferring, formatting, and displaying the resources.

To access the protocol of a URL with JavaScript, read the protocol property of a URL object.

For example, let’s grab the protocol of the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const protocol = URLObject.protocol

console.log(protocol)

Output:

https:

2. Subdomain

Accessing the subdomain of a URL

💡 Subdomain is the part before the domain name. The most common subdomain is www.

Subdomains split the website into logical parts, such as store, blog, or app (blog.example.com)

Behind the scenes, a subdomain is a subfolder in the root directory of a website.

This is the only non-straightforward part of the entire tutorial.

The URL object doesn’t store the subdomain in a separate field. Instead, the information resides in the hostname property. To only access the subdomain part of the hostname, you need to split the hostname string by dots. Then you need to access the first string of the result array.

For instance:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const subdomain = URLObject.hostname.split(".")[0]

console.log(subdomain)

Output:

app

3. Domain Name (Host Name)

Accessing the hostname of a URL

💡 The domain name is the “memoizable” part of a URL. It’s the name of the website via which users can access it.

For instance, example.com is a domain name (or hostname).

The .com part is called the TLD for the top-level domain.

To access the domain name of a URL with JavaScript, read the hostname property of a URL object.

For example, let’s grab the hostname of the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const domain = URLObject.hostname

console.log(domain)

Output:

app.example.com

4. Port

Accessing the port of a URL

💡 Port is the gate via which the browser accesses the resource in a server. The reason why you typically don’t see a port in a URL is that it’s set behind the scenes to default to 80 or 443.

To access the port of a URL with JavaScript, read the port property of a URL object.

For example, let’s grab the port of the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const port = URLObject.port

console.log(port)

Output:

80

5. Path

Accessing the path of a URL

💡 Path specifies the directory in which you want to access a file. Remember, a website is nothing but a directory of subfolders and files that live on a server. To access these, you need to know their paths!

To access the path name of a URL, read the pathname property of a URL object.

For example, let’s grab the path of the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const path = URLObject.pathname

console.log(path)

Output:

/favorites/

6. Query Parameters

Accessing the query string of a URL

💡 Query parameters allow you to perform an action on a server when requesting a resource. Commonly, you use query parameters to filter or organize content or track information on a site.

To access the query parameters (or the query string) of a URL, read the search property of a URL object.

For example, let’s grab the search query inserted in the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const queryParameters = URLObject.search

console.log(queryParameters)

Output:

?ref=codingem.com

7. Fragment

Accessing the fragment of a URL

💡 Fragment (also hash, anchor) leads to a secondary resource behind a URL. The most common use case for fragments is to lead a user to a specific part of a blog post or page.

To access the fragment of a URL with JavaScript, read the hash property of a URL object.

For example, let’s grab the hash of the sample URL:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const fragment = URLObject.hash

console.log(fragment)

Output:

#intro

URL Validation

One benefit of using the URL() constructor is that you get URL validation at the same time.

If a URL is invalid, the URL() constructor throws a TypeError.

Let’s take a look at an example of validating a malformed URL:

try {
  const url = new URL('http::://example.com')
} catch (err) {
  console.log(err)
}

Output:

{ TypeError [ERR_INVALID_URL]: Invalid URL: http::://example.com
    at onParseError (internal/url.js:241:17)
    at new URL (internal/url.js:319:5)
    at Object.<anonymous> (/tmp/YYhiRSgKGo.js:4:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19) input: 'http::://example.com' }

As you can see, the error says the URL is invalid.

The URL validation is a nice side effect of using the URL() constructor.

URL Manipulation

Notice that most of the URL components of the URL object are writeable. (You can see the read-only properties here.)

This means you can easily modify the parts of the URL using JavaScript.

For example, let’s change the protocol from HTTP to HTTPS:

const url = new URL('http://www.example.com')
url.protocol = "https"

console.log(url.protocol)

Output:

https:

Wrap Up

Today you learned how to parse URLs in your JavaScript project.

To take home, the built-in URL() constructor can help you deal with URLs in your code. With the URL() constructor object, you can parse specific parts of the URL, such as the hostname, path, or query strings.

Also, the URL() constructor automatically does URL validation for you before creating the URL object. Moreover, you can modify some writeable parts of the URL via the URL object.

Thanks for reading. Happy coding!

Read Also