How to find pathname of any URL - Javascript
Tags: javascript, api, url, pathname
Published: 2022-08-30 12:07:28

In this article I will share the knowledge of converting a `string` into `URL` and manipulating the properties of Uniform Resource Locator (URL).

Let's start 🚀

## Scenario 1


We need current `pathname` from URL of the current webpage to consume it in our application.

### Solution

We can get URL of the current webpage with window object. The following code gives us the `location` object of the current document.

```
console.log(window.location);
```
 
The `window.location` will return the following Location object as a read-only result.

```
{
  hash: ""
  host: "https://devbajwa.com"
  hostname: "https://devbajwa.com"
  href: "https://devbajwa.com/programming/languages/javascript/objects"
  origin: "https://devbajwa.com"
  pathname: "/programming/languages/javascript/objects"
  port: ""
  protocol: "https:"
  search: ""
}
``` 
`window.location` object has several properties which carries the information about the location of the current document.

Now, suppose the following URL is current document `https://devbajwa.com/programming/languages/javascript/objects`.

#### href

`window.location.href` gives us the **absolute URL** of the current document.


```
console.log(window.location.href)
->
"https://devbajwa.com/programming/languages/javascript/objects"
``` 
#### pathname
Similarly we can access the `pathname` with `window.location.pathname` property. This is also referred as **relative URL**.

```
console.log(window.location.pathname)
->
"/programming/languages/javascript/objects"
```

---

## Scenario 2

We `fetch` JSON data from an API call and receive a response with an absolute URL. We need `pathname` of that absolute URL. 

Since the response of an API call is in `string` format and not from the `window.location` object, we don't have access the `location` or `pathname` property for that `string` value(URL).

### Example


```
const absoluteURL = "https://devbajwa.com/programming/languages/javascript/objects";

console.log(absoluteURL.location);
->
undefined
``` 
If we try to access `location` object of our custom `string` format URL, we will get `undefined` response.

### Solution

We can leverage modern **URL API** available that accesses and manipulates URLs. The `new URL(string)` parses the `string` format URL and provides access to the integral parts through its properties.

Simply pass the `string` formatted URL to the `new URL()` function and the resulted value is a `URL` now. We have access to various properties.

#### href

```
const absoluteURL = new URL("https://devbajwa.com/programming/languages/javascript/objects");

console.log(absoluteURL.href);
->
"https://devbajwa.com/programming/languages/javascript/objects"
``` 

#### pathname
```
const absoluteURL = new URL("https://devbajwa.com/programming/languages/javascript/objects");

console.log(absoluteURL.pathname);
->
"/programming/languages/javascript/objects"
``` 

### Codepen

 {% codepen https://codepen.io/devbajwa/pen/PoRMmoW %} 


## Conclusion

Modern Javascript is becoming more declarative now a days. We should leverage the available modern Web APIs to make our code more readable and developer friendly. However, keep [check on the browser support](https://caniuse.com/?search=URL()) before use :)