Understanding JavaScript URL Object

Introduction

URL stands for Uniform Resource Locator. A URL is simply an address allocated to a resource on the web. This resource can be in form of an HTML webpage, an image, CSS file, etc.

Here's an example of a URL,

https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/

In the above URL, https://www.c-sharpcorner.com is the domain name, and /article/10-javascript-console-tricks-that-you-may-not-know/ is the path to the resource which in this case is a web page.

While writing a JavaScript application, often one needs to parse and access specific chunks of the URL. Fortunately, JavaScript comes bundled with a URL object which lets you easily parse and extract URL pieces with very little effort. In this article, we'll take a look at this URL object in detail.

Syntax

The syntax for using the URL object is quite straightforward.

const url = new URL(url [, baseUrl]);

Parameters

url - a string that represents the URL. The URL can be absolute or relative.
baseUrl - If the url in the first parameter is relative, then we can use the second argument to represent the absolute base url.

Let's quickly understand this in detail with an example.

const url = new URL('https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/');

As we can see we've provided a url in the first parameter. And since, this url is absolute, we don't need to provide the second parameter.

If the first argument to the URL constructor function is a relative URL then we need to specify the base URL using the second parameter.

const url = new URL('/article/10-javascript-console-tricks-that-you-may-not-know/', 'https://www.c-sharpcorner.com');
console.log(url.href);
// Output: https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/

The href property on the URL object returns the entire url string.

We could parse and extract a large variety of information from the url string using the URL object.

hostname

const url = new URL('https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/');
console.log(url.hostname);
// Output: www.c-sharpcorner.com

As you can see in the above code snippet, we can fetch the domain name from the url using the URL object.

pathname

The URL object contains a pathname property that holds the relative path that is followed by the domain name.

const url = new URL('https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/');
console.log(url.pathname);
// Output: /article/10-javascript-console-tricks-that-you-may-not-know/

If the url string consists of only domain name, the pathname property will simply hold "/".

const url = new URL('https://www.c-sharpcorner.com');
console.log(url.pathname);
// Output: /

Query String

const url = new URL('https://www.c-sharpcorner.com?author=harshal&category=javascript');
console.log(url.search);
// Output: ?author=harshal&category=javascript

As you can see in the above code snippet, the URL object also contain a search property that provides the access to query string parameters that is prefixed with ?.

Parsing the Query String

The search property provides the access to the complete query string, however if you need to access a specific query parameter you could use the searchParams object.

const url = new URL('https://www.c-sharpcorner.com?author=harshal&category=javascript');
console.log(url.searchParams.get('author'));
// Output: harshal

If the query parameter you're trying to access does not exist in the query string the searchParams.get method will return null.

hash

const url = new URL('https://www.c-sharpcorner.com#introduction');
console.log(url.hash);
// output: #introduction

As you can see in the above code snippet, the hash parameter provides access to the fragment identifiers in the URL which is followed by the # symbol.

protocol

The protocol property provides information about the protocol used by the URL.

const url = new URL('https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/');
console.log(url.protocol);
// Output: https:

In the above code since the url string provided to the URL object consists of https protocol the protocol property will output https: to the console.

port

As the name suggests, the port property gives information about the port number mentioned in url string.

const url = new URL('https://www.c-sharpcorner.com:8000');
console.log(url.port);
// Output: 8000

The URL object also contains two methods toString and toJSON which more or less returns the same value as href.

For more information visit: https://developer.mozilla.org/en-US/docs/Web/API/URL

That's it!

I hope you enjoyed this article. In case you've any queries or feedback do let me know in the comments section.

5 Comments

Join the conversation! Your thoughts help the community grow.

Hamid Khan5y ago
Thanks for share..... Keep posting
- Harshal Limaye5y ago
  Thanks, Hamid. I'm glad you enjoyed the article.
Hamid Khan5y ago
Good explanation
Nikunj Satasiya5y ago
Nice article Harshal, Thank you for this valuable information about the javascript URL object.
- Harshal Limaye5y ago
  Thanks, Nikunj. I'm glad you found the article useful.