Original link: dmitripavlutin.com/parse-url-j…

Uniform Resource Locator, or URL for short, is a reference to a web resource (web page, image, file). The URL specifies the location of the resource and the mechanism for retrieving the resource (HTTP, FTP, mailto).

For example, here’s the URL for this article:

https://dmitripavlutin.com/parse-url-javascript
Copy the code

Many times you need to get some component of a URL. They may be hostname (e.g. Dmitripavlutin.com) or pathname (e.g. /parse-url-javascript).

A convenient way to get parts of a URL is through the URL() constructor.

In this article, I’ll show you the structure of a URL and its main components.

Next, I’ll show you how to use the URL() constructor to easily get components of a URL, such as hostname, PathName, Query, or hash.

1. The URL structure

A picture is worth a thousand words. You can understand the components of a URL without much text description:

2. URL()The constructor

The URL() constructor allows us to parse a URL:

const url = new URL(relativeOrAbsolute [, absoluteBase]);
Copy the code

The parameter relativeOrAbsolute can be an absolute or relative path. If the first parameter is a relative path, the second parameter absoluteBase must be passed and must be the absolute path of the first parameter.

For example, let’s initialize the URL() function with an absolute path URL:

const url = new URL('http://example.com/path/index.html');

url.href; // => 'http://example.com/path/index.html'
Copy the code

Or we can use relative paths and absolute paths:

const url = new URL('/path/index.html'.'http://example.com');

url.href; // => 'http://example.com/path/index.html'
Copy the code

The href attribute in the URL() instance returns the full URL string.

After creating a new instance of URL(), you can use it to access any URL component in the previous image. For reference, here is a list of interfaces for instance URL() :

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}
Copy the code

The USVString argument above is mapped to a string in JavaScript.

3. Query string

Url. Search can be retrieved in the URL? The following query string:

const url = new URL(
  'http://example.com/path/index.html?message=hello&who=world'
);

url.search; / / = > '? message=hello&who=world'
Copy the code

If the query argument is not present, url.search returns an empty string by default:

const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html?');

url1.search; / / = > '
url2.search; / / = > '
Copy the code

3.1 Parsing the Query String

A more practical scenario is to get a concrete Query parameter rather than a native Query string.

A simple way to get specific Query parameters is to use the url.searchParams property. This property is an instance of URLSearchParams.

The URLSearchParams object provides a number of methods for retrieving Query parameters, such as GET (param), HAS (param), and so on.

Here’s an example:

const url = new URL(
  'http://example.com/path/index.html?message=hello&who=world'
);

url.searchParams.get('message'); // => 'hello'
url.searchParams.get('missing'); // => null
Copy the code

Url.searchparams.get (‘message’) returns the value of the message query parameter — hello.

If you use url.searchparams.get (‘missing’) to get a nonexistent parameter, you get null.

4. hostname

The url.hostname property returns the hostname part of a URL:

const url = new URL('http://example.com/path/index.html');

url.hostname; // => 'example.com'
Copy the code

5. pathname

The url. pathName attribute returns the pathname part of a URL:

const url = new URL('http://example.com/path/index.html?param=value');

url.pathname; // => '/path/index.html'
Copy the code

If the URL does not contain path, the property returns a slash / :

const url = new URL('http://example.com/');

url.pathname; / / = > '/'
Copy the code

6. hash

Finally, we can retrieve the hash value in the URL using the url.hash attribute:

const url = new URL('http://example.com/path/index.html#bottom');

url.hash; // => '#bottom'
Copy the code

The url.hash attribute returns an empty string “” when the HASH in the URL does not exist:

const url = new URL('http://example.com/path/index.html');

url.hash; / / = > '
Copy the code

7. Check the URL

When you use the new URL() constructor to create a new instance, it also validates the URL as a side effect. If the URL is invalid, a TypeError is thrown.

For example, HTTP ://example.com is an invalid URL because it follows HTTP with an extra space.

Let’s initialize the URL() constructor with this illegal URL:

try {
  const url = new URL('http ://example.com');
} catch (error) {
  error; // => TypeError, "Failed to construct URL: Invalid URL"
}
Copy the code

Because HTTP ://example.com is an invalid URL, new URL() raises a TypeError as expected.

8. Modify the URL

In addition to retrieving parts of the URL, properties like search, hostname, PathName, and hash are writable — which also means you can change the URL.

For example, let’s change a URL from red.com to blue.io:

const url = new URL('http://red.com/path/index.html');

url.href; // => 'http://red.com/path/index.html'

url.hostname = 'blue.io';

url.href; // => 'http://blue.io/path/index.html'
Copy the code

Note that only the Origin and searchParams properties are read-only in the URL() instance; all the other properties are writable and modify the original URL.

9. To summarize

The URL() constructor is a handy JavaScript tool for parsing (or validating) urls.

The first parameter in new URL(relativeOrAbsolute [, absoluteBase]) accepts the absolute or relative path of the URL. When the first parameter is a relative path, the second parameter must be passed and must be the base path of the first parameter.

After creating a new instance of URL(), you can easily retrieve most of the components of the URL, such as:

  • url.searchGets the native Query string
  • url.searchParamsThe specific Query parameter is obtained through an instance of URLSearchParams
  • url.hostnameTo obtain the hostname
  • url.pathnameTo obtain the pathname
  • url.hashGet the hash value

So what’s your favorite JavaScript tool for URL parsing?