Skip to main content

URLPattern

interface URLPattern

The URLPattern API provides a web platform primitive for matching URLs based on a convenient pattern syntax.

The syntax is based on path-to-regexp. Wildcards, named capture groups, regular groups, and group modifiers are all supported.

// Specify the pattern as structured data.
const pattern = new URLPattern({ pathname: "/users/:user" });
const match = pattern.exec("https://blog.example.com/users/joe");
console.log(match.pathname.groups.user); // joe

// Specify a fully qualified string pattern.
const pattern = new URLPattern("https://example.com/books/:id");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://deno.land/books/123")); // false

// Specify a relative string pattern with a base URL.
const pattern = new URLPattern("/article/:id", "https://blog.example.com");
console.log(pattern.test("https://blog.example.com/article")); // false
console.log(pattern.test("https://blog.example.com/article/123")); // true

Properties Jump to heading

readonly
Jump to headingprotocol: string

The pattern string for the protocol.

readonly
Jump to headingusername: string

The pattern string for the username.

readonly
Jump to headingpassword: string

The pattern string for the password.

readonly
Jump to headinghostname: string

The pattern string for the hostname.

readonly
Jump to headingport: string

The pattern string for the port.

readonly
Jump to headingpathname: string

The pattern string for the pathname.

readonly
Jump to headinghash: string

The pattern string for the hash.

Whether or not any of the specified groups use regexp groups.

Jump to headingtest(
baseURL?: string,
): boolean

Test if the given input matches the stored pattern.

The input can either be provided as an absolute URL string with an optional base, relative URL string with a required base, or as individual components in the form of an URLPatternInit object.

const pattern = new URLPattern("https://example.com/books/:id");

// Test an absolute url string.
console.log(pattern.test("https://example.com/books/123")); // true

// Test a relative url with a base.
console.log(pattern.test("/books/123", "https://example.com")); // true

// Test an object of url components.
console.log(pattern.test({ pathname: "/books/123" })); // true
Jump to headingexec(
baseURL?: string,
): URLPatternResult | null

Match the given input against the stored pattern.

The input can either be provided as an absolute URL string with an optional base, relative URL string with a required base, or as individual components in the form of an URLPatternInit object.

const pattern = new URLPattern("https://example.com/books/:id");

// Match an absolute url string.
let match = pattern.exec("https://example.com/books/123");
console.log(match.pathname.groups.id); // 123

// Match a relative url with a base.
match = pattern.exec("/books/123", "https://example.com");
console.log(match.pathname.groups.id); // 123

// Match an object of url components.
match = pattern.exec({ pathname: "/books/123" });
console.log(match.pathname.groups.id); // 123
variable URLPattern

The URLPattern API provides a web platform primitive for matching URLs based on a convenient pattern syntax.

The syntax is based on path-to-regexp. Wildcards, named capture groups, regular groups, and group modifiers are all supported.

// Specify the pattern as structured data.
const pattern = new URLPattern({ pathname: "/users/:user" });
const match = pattern.exec("https://blog.example.com/users/joe");
console.log(match.pathname.groups.user); // joe

// Specify a fully qualified string pattern.
const pattern = new URLPattern("https://example.com/books/:id");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://deno.land/books/123")); // false

// Specify a relative string pattern with a base URL.
const pattern = new URLPattern("/article/:id", "https://blog.example.com");
console.log(pattern.test("https://blog.example.com/article")); // false
console.log(pattern.test("https://blog.example.com/article/123")); // true

Properties Jump to heading

Back to top