DEV Community

Dmitrii Nefedov
Dmitrii Nefedov

Posted on

Browser API: URLPattern — A Modern Way to Compare URLs

Hello, web developers!

I want to quickly introduce a really cool and relatively new browser API that can be incredibly useful for frontend developers. We’re talking about URLPattern.

Official documentation

What is it?

This API allows you to quickly parse and match URLs against predefined patterns

URLPattern gives you access to:

  • Path parameters
  • Hostname parameters
  • Port
  • Protocol
  • Search parameters
  • Hash
  • Basically, everything in a URL

How to use it?

Create a pattern using the new URLPattern() constructor:

const pattern = new URLPattern(...);
Enter fullscreen mode Exit fullscreen mode

The object has two main methods:

test(url)

Returns a boolean — whether the URL matches the pattern.

exec(url)

Returns an object with extracted parameters from the URL.

Example of the result structure:

{
  hash: { groups: { 0: '' }, input: '' },
  hostname: { groups: { 0: 'domain.com' }, input: 'domain.com' },
  inputs: ['https://domain.com/path/1'],
  password: { groups: { 0: '' }, input: '' },
  pathname: { groups: { id: '1' }, input: '/path/1' },
  port: { groups: { 0: '' }, input: '' },
  protocol: { groups: { 0: 'https' }, input: 'https' },
  search: { groups: { 0: '' }, input: '' },
  username: { groups: { 0: '' }, input: '' }
}
Enter fullscreen mode Exit fullscreen mode

Usage Examples

Named Parameters

const pattern = new URLPattern({ pathname: "/path/:id" });

pattern.test('https://domain.com/path/1');
true

pattern.test('https://domain.com/path/sub_path/1');
false

pattern.test('https://domain.com/path');
false

pattern.exec('https://domain.com/path/1').pathname.groups;
{ id: '1' }
Enter fullscreen mode Exit fullscreen mode

Wildcard (*)

const pattern = new URLPattern({ pathname: "/path/*" });

pattern.test('https://domain.com/path/1');
true

pattern.test('https://domain.com/path/sub_path/1');
true

pattern.test('https://domain.com/path');
false

pattern.exec('https://domain.com/path/1').pathname.groups;
{ 0: '1' }

pattern.exec('https://domain.com/path/sub_path/1').pathname.groups;
{ 0: 'sub_path/1' }
Enter fullscreen mode Exit fullscreen mode

Optional Segment ({/sub_path}?)

const pattern = new URLPattern({ pathname: "/path{/sub_path}?" });

pattern.test('https://domain.com/path/1');
false

pattern.test('https://domain.com/path/sub_path');
true

pattern.test('https://domain.com/path/sub_path/1');
false

pattern.test('https://domain.com/path');
true

pattern.exec('https://domain.com/path/1').pathname.groups;
null

pattern.exec('https://domain.com/path/sub_path/1').pathname.groups;
null

pattern.exec('https://domain.com/path/sub_path').pathname.groups;
{}
Enter fullscreen mode Exit fullscreen mode

Hostname + Pathname

const pattern = new URLPattern({
  hostname: ":sub.domain.com",
  pathname: "/path/:id"
});

pattern.test("https://api.domain.com/path/42");
true

pattern.test("https://api.domain.com/path");
false

pattern.test("https://other.other_domain.com/path/42");
false

pattern.exec("https://api.domain.com/path/42").pathname.groups;
{ id: '42' }

pattern.exec("https://api.domain.com/path/42").hostname.groups;
{ sub: 'api' }
Enter fullscreen mode Exit fullscreen mode

Which URL parts can you match?

In the URLPattern constructor, you can use the following properties:

  • protocol
  • hostname
  • port
  • pathname
  • search
  • hash

Conclusion

URLPattern is a very convenient API for working with URLs in the browser. For obvious reasons, it has some limitations in older browsers, but for modern web applications, it provides a simple and concise way to parse and match URLs.

Personally, I’m very glad this API exists — it really simplifies the life of frontend developers.

Thank you all for your time and attention!

Top comments (0)