> ## Content Index
> Fetch the complete content index at: https://ricofritzsche.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# Mastering URL Manipulation in JavaScript: A Guide to Extracting Protocol and Domain
- URL: https://ricofritzsche.me/mastering-url-manipulation-in-javascript/
- Published: 2023-06-01T13:49:23.000Z
- Updated: 2024-03-04T13:42:17.000Z
- Description: When dealing with URLs in JavaScript, it's best to use the built-in URL API to manipulate and retrieve information. This will ensure that your code is robust, readable, and can correctly handle a wide range of URLs.
- Author: Rico Fritzsche
- Tags: Software Development, Tutorial

In this blog post, we will explore how to extract the protocol and domain from a URL string using JavaScript. This is a common task that may be needed in a variety of applications, especially those dealing with web resources.

Let's consider the following URL string as an example: `https://www.example.com/pathname?search=test#hash`.

## The JavaScript Way

JavaScript provides the built-in `URL` API which allows us to easily manipulate and retrieve information from URLs. The `URL` constructor creates a new URL object from a URL string:

```
const url = new URL("https://www.example.com/pathname?search=test#hash");

```

From this `url` object, we can access several properties which provide information about the URL. In this case, we are interested in the `protocol` and `hostname` properties:

```
const protocol = url.protocol; // "https:"
const domain = url.hostname; // "www.example.com"

```

And if we want both the protocol and domain together:

```
const protocolAndDomain = `${url.protocol}//${url.hostname}`; 
// "https://www.example.com"

```

## The Don'ts

While it may be tempting to try and extract the protocol and domain using string operations, such as `split`, this approach is generally not recommended. URL formatting can be complex and varies greatly, and a naive string operation may not correctly handle all cases. In addition, the `URL` API provides a more robust and readable solution.

Consider this example:

```
const urlString = "https://www.example.com/pathname?search=test#hash";
const protocolAndDomain = urlString.split('/')[2];

```

This will work for this particular URL, but may fail for others. For instance, if the URL does not contain a path (e.g., https://www.example.com), the `split` operation will not work as expected.

## Conclusion

When dealing with URLs in JavaScript, it's best to use the built-in `URL` API to manipulate and retrieve information. This will ensure that your code is robust, readable, and can correctly handle a wide range of URLs. Avoid using simple string operations, as URLs can be complex and vary greatly in format. Stick to the provided APIs for the best results.

Next time you're dealing with URLs in your JavaScript code, keep these tips in mind!

*Cheers*!