JavaScript URL Parse with parse-url

In this article, we will discuss javascript URL parse. Parsing URLs is a common activity in web development that appears straightforward but may quickly become complicated. It’s not every day that you come across a module that makes parsing so simple that you don’t have to do any thinking.

Despite being relatively young (it was released in June 2021), parse-url is one of the most popular JavaScript modules for parsing URLs, with around 3 million weekly downloads.

Parts of an URL

A URL is made up of many parts, breaking it down into pieces without using pure string parsing is a useful tool to have. The fundamental portions of every URL are the same, with optional elements depending on the query or action.

The following are the elements that make up a URL:

  • Scheme – use to identify the protocol being use to fetch the resource on the Internet. Some of the more popular protocols are: HTTP, HTTPS, IP, ICMP, TCP, UDP, etc.
  • Host – the name of the host that has the resource we’re getting (www.softhunt.net).
  • Path – the path to the resource located on the host (www.softhunt.net/path/to/index.html).
  • Query string – string containing key-value pairs (www.softhunt.net/index?key=value&key2=value2).

These are the most important parts of the URL, but we’ll see that parse-url can provide many more in a highly readable and parsable style. just like the below image.

URL Parse

Installing and Setting up the parse-url Module

Create a folder with any name and In the folder, install the below module using npm:

$ npm i parse-url

now create an index.js file and paste the following code because it is always require before using parse-url.

const parseUrl = require('parse-url');

That’s all there is to it; we’re ready to go! Let’s have a look at what this module has to offer.

Parsing the URL

To start, let’s take a simple URL: https://www.softhunt.net The constructor for parseUrl takes in two parameters, string_url and normalize, with normalize being optional.

It’s set to false by default, and it’s expected that the URLs given have previously been normalized. It converts a non-normalized URL to a normalized one when true. Consider the following scenario:

someRandomUrl.com:80 --> http://someRandomUrl.com

This is call as URL normalization. The parse-url module bases its normalization on the normalize-url module and the normalize-url module works exactly as shown above.

Let’s have look to parse Url with different examples and scenarios:

Example 01: JavaScript URL Parse with Simple href

paste the following code in your index.js file and see your console.

const parseUrl = require('parse-url');
const url = 'https://www.softhunt.net/';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Output: The output of the code will be in JSON format, which consists of the elements of that URL

JavaScript URL Parse img1

As you can see, a lot of information was collect, however, part of it is empty due to the simple URL we gave. Let’s look at the different elements in this JSON:

  • protocols – list of protocols used in the URL (can be more the one)
  • protocol – first of protocols
  • port – a port (if supplied)
  • resource – the host
  • user – user at the host’s server ([email protected])
  • pathname – path to resource
  • hash – if supplied, info after the # (hash) – usually anchors on a web page
  • search – a query string
  • href – the full URL

Example 02: JavaScript URL Parse including pathname

One of the reasons this module was built in the first place was to use GitHub URLs, which is an intriguing example. In comparison to other URLs you see on a regular basis, GitHub connections may grow fairly complicated and complex, and can include many protocols and users:

const parseUrl = require('parse-url');
const url = 'git+ssh://[email protected]/path/to/resource.git';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Output:

JavaScript URL Parse img2

The list protocol here has changed since there are multiple protocols in use. However, the first one is refer to when printing out the URL info. We can also see pathname is now fills with the path to the resource.

Example 03: including key values

Let’s really up the URL and include a hash and a couple of key-value queries:

const parseUrl = require('parse-url');
const url = 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Output: This example differs slightly from the previous one, just enough to fill in the blanks in the previous example.

JavaScript URL Parse img3

We now have the port, hash, and query – and we even have the query’s keys and values! When parsing URLs, having the parsed data structured in a human-readable format that is also universally accepted and easily parsable is a huge help.

However, this is merely the returned object’s pretty-printed output. The fact that these parsed components are all fields of the returned object, which we can readily access, allows us to genuinely deal with them:

Example 04: Seperate Parsing

const parseUrl = require('parse-url');
const url = 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);

console.log("The protocols used in the URL are :" + parsedUrl.protocols);
console.log("The port used in the URL is :" + parsedUrl.port);
console.log("The resource in the URL is :" + parsedUrl.resource);
console.log("The user in the URL is :" + parsedUrl.user);
console.log("The pathname in the URL is :" + parsedUrl.pathname);
console.log("The hash in the URL is :" + parsedUrl.hash);
console.log("The search part in the URL is :" + parsedUrl.search);
console.log("Full URL is :" + parsedUrl.href);

Output:

JavaScript URL Parse img4

Example 05: Normalized and UnNnormalized URL

Let’s take a look at the results of URL normalization. If we pass an unnormalized URL as a URL string, such as softhunt.net:3000/path/to/index.html#anchor:

const parseUrl = require('parse-url');
const url = 'softhunt.net:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);

Output:

img5

We can see that the parser appropriately filled up the href attribute and assigned http as the protocol. Because the missing components were never provided, they are not filled in.

If we were to disable the normalization feature while providing a non-normalized URL, the results would be off: let’s have a look.

const parseUrl = require('parse-url');
const url = 'softhunt.net:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url);
console.log(parsedUrl);

Output:

img6

Conclusion

We’ve seen how parse-url allows us to parse URLs quickly and simply without any further processing, and how it makes the process of parsing URLs very easy and understandable.

It divides everything up as needed and generates a parsedUrl object that can be accessed and updated just like any other object. The module is as basic as they come, with a clean output and syntax that is as simple as possible, generating quick and precise results.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn

Suggested Articles:

  1. What is the Callback Function in JavaScript?
  2. How to Get URL Parameters with JavaScript [With Examples]
  3. How to Promisify an Ajax Call?

Leave a Comment