🥔 🍋 💪🏻 How do I parse a URL in JavaScript? 🦄 ✅ 🧑🏿‍🤝‍🧑🏼

Good day, friends!

I present to your attention the translation of the post "How to Parse URL in JavaScript: hostname, pathname, query, hash" by Dmitri Pavlutin.

Uniform Resource Locator or URL for short is a link to a web resource (web page, image, file). The URL defines the location of the resource and how it is received - the protocol (http, ftp, mailto).

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

https://dmitripavlutin.com/parse-url-javascript

It is often necessary to retrieve certain elements of a URL. This can be a hostname (hostname, dmitripavlutin.com) or a pathname (pathname, /parse-url-javascript).

A convenient way to get the individual components of a URL is with the constructor URL().

In this article, we will talk about the structure and main components of a URL.

1. URL structure

A picture is worth a thousand words. In the above image, you can see the main components of the URL:

2. URL constructor ()

A constructor URL()is a function that allows you to parse (parse) URL components:

const url = new URL(relativeOrAbsolute [, absoluteBase])

The argument relativeOrAbsolutecan be an absolute or relative URL. If the first argument is a relative link, then the second argument,, absoluteBaseis required and is the absolute URL that is the basis for the first argument.

For example, let's initialize URL()with an absolute URL:

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

url.href // 'http://example.com/path/index.html'

Now let's combine the relative and absolute URLs:

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

url.href // 'http://example.com/path/index.html'

The hrefinstance property URL()returns the passed URL string.

After creating an instance URL(), you can access the URL components. For reference, here is the instance interface 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;
}

Here, type USVStringmeans JavaScript should return a string.

3. Query string

The property url.searchallows you to get a URL query string starting with a prefix ?:

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

url.search // '?message=hello&who=world'

If there is no query string, it url.searchreturns an empty string (''):

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

url1.search // ''
url2.search // ''

3.1. Parsing (parsing) a query string

Instead of getting the original query string, we can get its parameters.

An easy way to do this is provided by the property url.searchParams. The value of this property is an instance of the URLSeachParams interface.

The object URLSearchParamsprovides many methods for working with query string parameters ( get(param), has(param)and so on).

Let's take 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

url.searchParams.get('message')returns the value of the messagequery string parameter .

Accessing a non-existent parameter url.searchParams.get('missing')returns null.

4. Hostname (hostname)

The property value url.hostnameis the hostname of the URL:

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

url.hostname // 'example.com'

5. Path (pathname)

The property url.pathnamecontains the URL path:

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

url.pathname // '/path/index.html'

If the URL has no path, it url.pathnamereturns the character /:

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

url.pathname; // '/'

6. Hash

Finally, the hash can be obtained via a property url.hash:

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

url.hash // '#bottom'

If there is no hash, it url.hashreturns an empty string (''):

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

url.hash // ''

7. Checking (validating) URL

Calling the constructor new URL()not only creates an instance, but also validates the passed URL. If the URL is not valid, it is thrown away TypeError.

For example, http ://example.comnot a valid URL because httpthere is a space after .

Let's try using this URL:

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

As the 'http ://example.com'wrong url is new URL('http ://example.com')throwing as expected TypeError.

8. Working with URL

Properties such as search, hostname, pathname, hashare writable.

For example, let's change the hostname of an existing URL from red.comto 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'

Properties origin, searchParamsare read-only.

9. Conclusion

A constructor URL()is a very convenient way to parse (parse) and validate a URL in JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]takes an absolute or relative URL as the first parameter. If the first parameter is a relative URL, the second parameter must be an absolute URL - the base for the first argument.

After instantiation URL(), you can access the main components of the URL:

url.search - original query string
url.searchParams- an instance URLSearchParamsto get query string parameters
url.hostname - host name
url.pathname - way
url.hash - hash value

How do I parse a URL in JavaScript?