URL Pattern

https://github.com/whatwg/urlpattern
Admin
The URL Pattern Standard defines a way to match and construct URLs, enabling flexible and efficient...
Tokens:6,454
Snippets:45
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Build URL Pattern Standard Locally

Source: https://github.com/whatwg/urlpattern/blob/main/README.md

Instructions to quickly build the URL Pattern Standard locally using a web service, avoiding the need for local installations.

```Shell
make
```

--------------------------------

### Instantiate URLPattern and Test URL Match

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Demonstrates how to create a new `URLPattern` instance using `baseURL` and `pathname` options, and then use its `test()` method to check if a given URL string matches the defined pattern. This example shows a basic wildcard pattern.

```javascript
let pattern = new URLPattern({
  baseURL: self.origin,
  pathname: "/product/*?"
});

if (pattern.test(urlString)) {
  // do something
}
```

--------------------------------

### Filter on a Specific URL Component

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

This example demonstrates how to construct a `URLPattern` to match specific URL components, such as a hostname and its subdomains. When the constructor is called with a structured object, any missing components default to the `*` wildcard pattern.

```js
// Construct a URLPattern that matches a specific domain and its subdomains.
// All other URL components default to the wildcard `*` pattern.
const pattern = new URLPattern({
  hostname: `{*.}?example.com`
});

// Prints `{*.}?example.com`
console.log(pattern.hostname);

// All print `*`
console.log(pattern.protocol);
console.log(pattern.username);
console.log(pattern.password);
console.log(pattern.pathname);
console.log(pattern.search);
console.log(pattern.hash);

// Prints `true`
console.log(pattern.test("https://example.com/foo/bar"));

// Prints `true`
console.log(pattern.test({ hostname: "cdn.example.com" }));

// Prints `true`
console.log(pattern.test("custom-protocol://example.com/other/path?q=1"));

// Prints `false` because the hostname component does not match
console.log(pattern.test("https://cdn-example.com/foo/bar"));
```

--------------------------------

### URLPattern: Combining Multiple Components and Features (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

This example showcases the power of URLPattern by combining various features across multiple URL components. It defines a pattern that matches protocol, optional username/password, hostname with subdomains, and a dynamic pathname, then extracts the corresponding groups.

```js
const pattern = new URLPattern({
  protocol: "http{s}?",
  username: ":user?",
  password: ":pass?",
  hostname: "{:subdomain.}*example.com",
  pathname: "/product/:action*"
});

const result = pattern.exec("http://foo:bar@sub.example.com/product/view?q=12345");

// Prints `foo`
console.log(result.username.groups.user);

// Prints `bar`
console.log(result.password.groups.pass);

// Prints `sub`
console.log(result.hostname.groups.subdomain);

// Prints `view`
console.log(result.pathname.groups.action);
```

--------------------------------

### Handling Ambiguous URLPattern Constructor Strings

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Illustrates how the URLPattern constructor interprets ambiguous strings, favoring pattern syntax. It shows an example where a string like 'data:foo*' is treated as a relative pathname pattern, leading to an error if no base URL is provided.

```js
// Throws because this is interpreted as a single relative pathname pattern
// with a ":foo" named group and there is no base URL.
const pattern = new URLPattern("data:foo*");
```

--------------------------------

### JavaScript URL Routing Example with URLPattern

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

This snippet demonstrates how to use URLPattern for routing URLs in JavaScript. It shows two patterns: one for matching image file types (jpg, png, gif) and another for API endpoints with optional parameters. The 'exec' method is used to check for matches and extract named groups from the URL.

```javascript
const imagePattern = new URLPattern({
  pathname: '/*.:imagetype(jpg|png|gif)'
});
if (let result = imagePattern.exec(url)) {
  return handleImage(result.pathname.groups['imagetype']);
}

const apiPattern = new URLPattern({
  pathname: '/api/:product/:param?'
});
if (let result = apiPattern.exec(url)) {
  return handleAPI(result.pathname.groups['product'],
                   result.pathname.groups['param']);
}
```

--------------------------------

### Escaping Characters in URLPattern Constructor Strings

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Explains how to escape ambiguous characters in URLPattern constructor strings to force them to be treated as URL separators rather than pattern characters. It provides an example of escaping ':' as '\:' to correctly interpret it as a protocol suffix.

```js
// Constructs a URLPattern treating the `:` as the protocol suffix.
const pattern = new URLPattern("data\\:foo*");

// Prints `data`
console.log(pattern.protocol);

// Prints `foo*`
console.log(pattern.pathname);

// All print `""`
console.log(pattern.username);
console.log(pattern.password);
console.log(pattern.hostname);
console.log(pattern.port);
console.log(pattern.search);
console.log(pattern.hash);

// Prints `true`
console.log(pattern.test("data:foobar"));
```

--------------------------------

### URLPattern: Custom Prefix/Suffix for Optional/Repeated Modifiers (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

This example demonstrates how to use curly braces to define a custom prefix or suffix that is subject to an optional (?), repeated (*), or one-or-more (+) modifier within a URLPattern. It specifically shows matching hostnames with optional subdomains.

```js
const pattern = new URLPattern({ hostname: "{:subdomain.}*example.com" });

// Prints `true`
console.log(pattern.test({ hostname: "example.com" }));

// Prints `true`
console.log(pattern.test({ hostname: "foo.bar.example.com" }));

// Prints `false`
console.log(pattern.test({ hostname: ".example.com" }));

const result = pattern.exec({ hostname: "foo.bar.example.com" });

// Prints `foo.bar`
console.log(result.hostname.groups.subdomain);
```

--------------------------------

### URLPattern: Making Text Optional/Repeated Without a Matching Group (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

This example illustrates how curly braces can be used in URLPattern to make specific text optional or repeatable without creating a named matching group. It demonstrates this for an optional trailing slash in a pathname.

```js
const pattern = new URLPattern({ pathname: "/product{/}?" });

// Prints `true`
console.log(pattern.test({ pathname: "/product" }));

// Prints `true`
console.log(pattern.test({ pathname: "/product/" }));

const result = pattern.exec({ pathname: "/product/" });

// Prints `{}`
console.log(result.pathname.groups);
```

--------------------------------

### Register Root Service Worker with Exact Path URLPattern

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Example of registering a service worker to control only the root path ('/') of a site using an exact URLPattern match. This demonstrates how URLPattern can be used to prevent the root service worker from affecting sub-paths that might be managed by separate teams.

```javascript
// Service worker controlling '/' exactly.
navigator.serviceWorker.register('/root-sw.js', {
  scope: new URLPattern({
    baseURL: self.location,
    pathname: '/'
  })
});

// '/' is controlled, but product hosted at '/sub/path/product' is not controlled.
```

--------------------------------

### Constructing URLPattern with all components

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Demonstrates the `URLPattern` constructor with all URL components explicitly defined, using `path-to-regexp` syntax for patterns.

```javascript
const p = new URLPattern({
  protocol: 'https',
  username: '',
  password: '',
  hostname: 'example.com',
  port: '',
  pathname: '/foo/:image.jpg',
  search: '(.*)',
  hash: '(.*)',
});
```

--------------------------------

### URLPattern Constructor

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Creates a new `URLPattern` object. It has two forms: one taking a `URLPatternInit` dictionary object and another taking a URL string with an optional base URL. Missing properties default to the `*` wildcard pattern if `baseURL` is not provided.

```APIDOC
URLPattern Constructor:
  new URLPattern(obj: URLPatternInit)
    obj: URLPatternInit dictionary object
      protocol: string (optional)
      username: string (optional)
      password: string (optional)
      hostname: string (optional)
      port: string (optional)
      pathname: string (optional)
      search: string (optional)
      hash: string (optional)
      baseURL: string (optional) - parsed as a URL to populate missing properties

  new URLPattern(pattern: string, baseURL: string)
    pattern: URL string containing patterns (may require escaping characters like ':' as '\:')
    baseURL: Base URL string (optional, used for relative patterns)
```

--------------------------------

### URLPattern() Constructor API

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Documentation for the `URLPattern()` constructor, detailing its single object argument and properties like `protocol`, `hostname`, `pathname`, and `baseURL`.

```APIDOC
URLPattern(options: object)
  options: object
    protocol: string (pattern) - Defaults to '(.*)'
    username: string (pattern) - Defaults to '(.*)'
    password: string (pattern) - Defaults to '(.*)'
    hostname: string (pattern) - Defaults to '(.*)'
    port: string (pattern) - Defaults to '(.*)'
    pathname: string (pattern) - Defaults to '(.*)'
    search: string (pattern) - Defaults to '(.*)'
    hash: string (pattern) - Defaults to '(.*)'
    baseURL: string (URL) - Optional, provides fixed origin patterns
```

--------------------------------

### Using Base URLs with URLPattern test() and exec()

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Shows how to use base URLs when calling the test() and exec() methods of a URLPattern. It demonstrates passing base URLs as part of a dictionary input or as a second argument, and illustrates how exec() extracts matched components and groups.

```js
const pattern = new URLPattern({ hostname: "example.com", pathname: "/foo/*" });

// Prints `true` as the hostname based in the dictionary `baseURL` property
// matches.
console.log(
    pattern.test({ pathname: "/foo/bar", baseURL: "https://example.com/baz" }));

// Prints `true` as the hostname in the second argument base URL matches.
console.log(pattern.test("/foo/bar", "https://example.com/baz"));

// Throws because the second argument cannot be passed with a dictionary input.
try {
  pattern.test({ pathname: "/foo/bar" }, "https://example.com/baz");
} catch (e) {}

// The `exec()` method takes the same arguments as `test()`.
const result = pattern.exec("/foo/bar", "https://example.com/baz");

// Prints `/foo/bar`
console.log(result.pathname.input);

// Prints `bar`
console.log(result.pathname.groups[0]);

// Prints `example.com`
console.log(result.hostname.input);
```

--------------------------------

### URLPattern API Core Components

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Outlines the main components of the URLPattern API, including its constructor and the `test()` and `exec()` matching methods, as described in the incubation update.

```APIDOC
URLPattern API:
  Constructor:
    URLPattern()
  Methods:
    test()
    exec()
```

--------------------------------

### Simplifying URLPattern constructor with default wildcards

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Shows how the `URLPattern` constructor can be simplified by omitting components that default to the `(.*)` wildcard pattern.

```javascript
const p = new URLPattern({
  protocol: 'https',
  username: '',
  password: '',
  hostname: 'example.com',
  port: '',
  pathname: '/foo/:image.jpg',
});
```

--------------------------------

### Simplifying URLPattern constructor with baseURL

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Illustrates using the `baseURL` property to simplify the `URLPattern` constructor for fixed origin patterns.

```javascript
const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});
```

--------------------------------

### Matching URL Paths with URLPattern in JavaScript

Source: https://github.com/whatwg/urlpattern/blob/main/howto.md

This snippet demonstrates how to create a URLPattern instance to match a specific path structure and extract grouped parameters. It checks if a given URL matches the pattern and, if so, processes the extracted 'product' group.

```javascript
const pattern = new URLPattern({ pathname: '/:product/index.html' });
const result = pattern.exec(someURL);
if (result) {
  handleProduct(result.pathname.groups.product);
}
```

--------------------------------

### URLPattern constructor with relative pathname and baseURL

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Shows how to use a relative pathname with a `baseURL` in the `URLPattern` constructor, achieving equivalence to a fully specified pattern.

```javascript
const p = new URLPattern({
  pathname: ':image.jpg',
  baseURL: 'https://example.com/foo/',
});
```

--------------------------------

### Constructing URLPattern from Full URL String

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Demonstrates how to create a URLPattern from a full URL string with embedded patterns. It explains how the constructor handles ambiguous characters, favoring URL syntax when unambiguous, and shows how to access different URL components and test against URLs.

```js
// Construct a URLPattern that matches URLs to CDN servers loading jpg images.
// URL components not explicitly specified, like search and hash here, result
// in the empty string similar to the URL() constructor.
const pattern = new URLPattern("https://cdn-*.example.com/*.jpg");

// Prints `https`
console.log(pattern.protocol);

// Prints `cdn-*.example.com`
console.log(pattern.hostname);

// Prints `/*.jpg`
console.log(pattern.pathname);

// All print `""`
console.log(pattern.username);
console.log(pattern.password);
console.log(pattern.search);
console.log(pattern.hash);

// Prints `true`
console.log(
    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg");

// Prints `false` because the search component does not match
console.log(
    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1");
```

--------------------------------

### Instantiate URLPatternList and Test URL Match

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Illustrates the creation of a `URLPatternList` instance, which accepts an array of pattern objects. The `test()` method is then used to determine if a URL string matches any of the patterns within the list, providing flexibility for multiple matching conditions.

```javascript
let pattern = new URLPatternList([
  {
    baseURL: self.origin,
    pathname: "/product"
  },
  {
    baseURL: self.origin,
    pathname: "/product/*"
  }
]);

if (pattern.test(urlString)) {
  // do something
}
```

--------------------------------

### URLPattern test() method with pathname-only input

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Demonstrates using the `test()` method when only a pathname is available, showing how to construct the pattern and provide the input.

```javascript
// we only care about the pathname
const p = new URLPattern({ pathname: '/foo/:name' });

// we only provide the pathname
p.test({ pathname: '/foo/bar' });
```

--------------------------------

### URLPattern.prototype.exec() Method API

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Documentation for the `exec()` method, which performs the same matching as `test()` but returns a detailed result object on success, or `false` on failure.

```APIDOC
URLPattern.prototype.exec(input: string | object): object | false
  input: string | object
    string: A full URL string to test against the pattern.
    object: A dictionary of URL components.
  Returns: object | false
    object: A result object on successful match.
      input: string - The original input to exec().
      [component]: object - Sub-result for each matched component (e.g., 'pathname', 'hostname').
        input: string - The canonicalized input value for that component.
        groups: object - A dictionary of captured group results (e.g., { image: 'cat' }).
    false: If the input does not match the pattern or is invalid.
```

--------------------------------

### Using Base URLs in URLPattern Constructor

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Demonstrates how base URLs can be used during URLPattern construction. It highlights that base URLs are treated strictly as URLs without pattern syntax and how they influence the resulting pattern's components, preventing 'default to wildcard' behavior for unspecified parts.

```js
const pattern1 = new URLPattern({ pathname: "/foo/*",
                                  baseURL: "https://example.com" });

// Prints `https`
console.log(pattern1.protocol);

// Prints `example.com`
console.log(pattern1.hostname);

// Prints `/foo/*`
console.log(pattern1.pathname);

// All print `""`
console.log(pattern1.username);
console.log(pattern1.password);
console.log(pattern1.port);
console.log(pattern1.search);
console.log(pattern1.hash);

// Equivalent to pattern1
const pattern2 = new URLPattern("/foo/*", "https://example.com" });

// Throws because a relative constructor string must have a base URL to resolve
// against.
try {
  const pattern3 = new URLPattern("/foo/*");
} catch (e) {}
```

--------------------------------

### URLPattern exec() method and result object structure

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Illustrates the `exec()` method, showing how it returns a result object containing input, component-specific input, and captured groups.

```javascript
const p = new URLPattern({ pathname: '(.*)/:image.jpg' });
const r = p.exec('https://example.com/foo/bar/cat.jpg?q=v');

// outputs 'https://example.com/foo/bar/cat.jpg'
console.log(r.input);

// outputs '/foo/bar/cat.jpg'
console.log(r.pathname.input);

// outputs 'cat'
console.log(r.pathname.groups.image);
```

--------------------------------

### URLPattern and URLPatternList Web APIs

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Defines the proposed URLPattern and URLPatternList APIs for client-side URL pattern matching, detailing their constructors and the `test` method. The syntax for patterns is based on path-to-regexp, supporting wildcards, named groups, and regular expression groups.

```APIDOC
URLPattern:
  __init__(options: object)
    options: An object defining the pattern components. Supported properties include:
      baseURL: string - The base URL for the pattern.
      pathname: string - The path component of the URL pattern, conforming to path-to-regexp syntax.
  test(url: string): boolean
    url: The URL string to test against the pattern.
    Returns: boolean - True if the URL matches the pattern, false otherwise.

URLPatternList:
  __init__(patterns: Array<object>)
    patterns: An array of pattern objects, each conforming to the options accepted by URLPattern's constructor.
  test(url: string): boolean
    url: The URL string to test against the list of patterns.
    Returns: boolean - True if the URL matches any of the patterns in the list, false otherwise.
```

--------------------------------

### URLPattern test() method with string and dictionary input

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Compares equivalent calls to the `test()` method using a full URL string input versus a dictionary object input with `baseURL`.

```javascript
// string input
p.test('https://example.com/foo/bar');

// dictionary input
p.test({
  pathname: '/foo/bar',
  baseURL: 'https://example.com',
});
```

--------------------------------

### URLPattern Methods

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Methods available on the `URLPattern` object for testing URL matches and extracting detailed match information.

```APIDOC
URLPattern Methods:
  test(input: string | URLPatternInput): boolean
    input: string or object representing the URL to test against the pattern
    Returns: boolean - true if the input matches the current pattern, false otherwise

  exec(input: string | URLPatternInput): URLPatternResult | null
    input: string or object representing the URL to execute against the pattern
    Returns: URLPatternResult object containing detailed match information and capture groups, or null if there is no match
```

--------------------------------

### URLPattern Properties

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Returns the URL scheme patterns set during construction. These values may differ from the input due to normalization.

```APIDOC
URLPattern Properties:
  protocol: string
  username: string
  password: string
  hostname: string
  port: string
  pathname: string
  search: string
  hash: string
```

--------------------------------

### Using URLPattern for Client-Side Routing Logic

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Shows how `URLPattern` can be used in client-side JavaScript for routing. It demonstrates defining a pattern with a named group (`:product`) and extracting the group's value from a matched URL to facilitate dynamic routing, promoting a consistent URL matching primitive across different web development contexts.

```javascript
const pattern = new URLPattern({ pathname: '/api/:product' });
if (let result = pattern.exec(url)) {
  routeTo(result.pathname.groups['product']);
}
```

--------------------------------

### URLPattern.prototype.test() Method API

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Documentation for the `test()` method, which checks if an input URL or URL component dictionary matches the pattern, returning `true` or `false`.

```APIDOC
URLPattern.prototype.test(input: string | object): boolean
  input: string | object
    string: A full URL string to test against the pattern.
    object: A dictionary of URL components (e.g., { pathname: '/foo/bar', baseURL: 'https://example.com' }).
  Returns: boolean - `true` if the input matches the pattern, `false` otherwise (including for invalid input).
```

--------------------------------

### Registering Service Worker with Wildcard URLPattern Scope

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Illustrates registering a service worker with a `URLPattern` scope that matches `/foo` and any path nested under it (e.g., `/foo/bar`), but explicitly excludes paths like `/foobar`. This showcases flexible pattern matching for service worker control, allowing for broader yet controlled scope definitions.

```javascript
// Service worker controls `/foo` and `/foo/*`, but
// does not control `/foobar`.
navigator.serviceWorker.register(scriptURL, {
  scope: new URLPattern({
    baseURL: self.location,
    pathname: '/foo/*?'
  })
});
```

--------------------------------

### Register Service Worker with URLPattern Scope

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Demonstrates how to register a service worker using the URLPattern API for defining its scope, allowing for more flexible and precise scope matching compared to simple string paths. It also shows how to retrieve the registration and verify the scope type. Note that a scope URLPattern is restricted to: variable components like wildcards only in pathname and search; no regular expressions besides `(.*)` for `*`; and wildcards only in trailing position.

```javascript
let reg1 = await navigator.serviceWorker.register(scriptURL, {
  scope: new URLPattern({
    baseURL: self.origin,
    pathname: '/foo/*?',
  })
});
assert_true(reg1.scope instanceof URLPattern);
assert_true(reg1.scopePattern instanceof URLPattern);

// Check which service worker controls '/foo':
let reg2 = await navigation.serviceWorker.getRegistration('/foo');
assert_equals(reg1, reg2);
```

--------------------------------

### Registering Service Worker with Exact URLPattern Scope

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Demonstrates how to register a service worker using `URLPattern` to precisely control the scope, matching only the `/foo` path and not its sub-paths. This provides more granular control than traditional prefix-matching, preventing unintended control over nested content.

```javascript
// Service worker controls '/foo' exactly, but not '/foo/bar'.
navigator.serviceWorker.register(scriptURL, {
  scope: new URLPattern({
    baseURL: self.location,
    pathname: '/foo'
  })
});
```

--------------------------------

### Lenient URLPattern constructor for pathname only

Source: https://github.com/whatwg/urlpattern/blob/main/202012-update.md

Demonstrates a very brief and lenient `URLPattern` constructor focusing only on the `pathname` component, omitting `baseURL` for less strict origin checking.

```javascript
const p = new URLPattern({ pathname: '/foo/:image.jpg' });
```

--------------------------------

### Define Web App Manifest Scope with URLPattern

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Shows how to specify a web app's scope using the new `scopePattern` field within the manifest JSON, which accepts a URLPattern object. Both the legacy `scope` string and the new `scopePattern` can be specified, with `scopePattern` taking precedence to ensure backward compatibility with older browsers.

```json
{
  "name": "FooApp",
  "scope": "https://foo.com/app/",
  "scopePattern": {
    "baseURL": "https://foo.com/",
    "pathname": "/app/*?"
  }
}
```

--------------------------------

### Register Service Worker with Legacy String Scope

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Illustrates the continued support for registering service workers using traditional string-based scopes. The browser internally converts this legacy string representation to a URLPattern object for consistency, as indicated by `scopePattern` being an instance of URLPattern.

```javascript
// Legacy API usage
let reg2 = await navigator.serviceWorker.register(scriptURL, {
  scope: '/bar/baz'
});
assert_equals(typeof reg2.scope, 'string');
assert_true(reg2.scopePattern instanceof URLPattern);
```

--------------------------------

### Access Matched Group Values from URLPattern exec() Result (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Demonstrates how to retrieve values from unnamed pattern groups using their sequential index numbers after calling `exec()` on a `URLPattern` object. It also shows how to access the full input string and all inputs.

```js
const pattern = new URLPattern({ hostname: "*.example.com" });
const result = pattern.exec({ hostname: "cdn.example.com" });

// Prints `cdn`
console.log(result.hostname.groups[0]);

// Prints `cdn.example.com`
console.log(result.hostname.input);

// Prints `[{ hostname: "cdn.example.com" }]`
console.log(result.inputs);
```

--------------------------------

### Use Named Groups with Custom Regular Expressions in URLPattern (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Explains how to combine a named group with a custom regular expression in a `URLPattern`. This allows for both descriptive naming and flexible pattern matching.

```js
const pattern = new URLPattern({ pathname: "/:type(foo|bar)" });
const result = pattern.exec({ pathname: "/foo" });

// Prints `foo`
console.log(result.pathname.groups.type);
```

--------------------------------

### Make URLPattern Matching Groups Optional and Repeated with '*' Modifier (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Shows how to make a matching group both optional and repeatable using the `*` modifier. For pathname components, this modifier also makes the preceding `/` optional and repeatable, providing flexible matching for zero or more occurrences.

```js
const pattern = new URLPattern({ pathname: "/product/:action*" });
const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });

// Prints `do/some/thing/cool`
console.log(result.pathname.groups.action);

// Prints `true`
console.log(pattern.test({ pathname: "/product" }));
```

--------------------------------

### Access Matched Group Values by Custom Names from URLPattern exec() Result (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Illustrates how to define custom names for matching groups within a `URLPattern` and then use these names to access the corresponding matched values from the `exec()` result object. This provides more readable access than index-based retrieval.

```js
// Construct a URLPattern using matching groups with custom names.  These
// names can then be later used to access the matched values in the result
// object.
const pattern = new URLPattern({ pathname: "/:product/:user/:action" });
const result = pattern.exec({ pathname: "/store/wanderview/view" });

// Prints `store`
console.log(result.pathname.groups.product);

// Prints `wanderview`
console.log(result.pathname.groups.user);

// Prints `view`
console.log(result.pathname.groups.action);

// Prints `/store/wanderview/view`
console.log(result.pathname.input);

// Prints `[{ pathname: "/store/wanderview/view" }]`
console.log(result.inputs);
```

--------------------------------

### Register Service Worker for Overlapping Paths with Optional Modifier

Source: https://github.com/whatwg/urlpattern/blob/main/explainer.md

Illustrates how to register a service worker for a specific product path (e.g., '/maps') and everything under it, without affecting similarly named paths (e.g., '/mapsearch'). This is achieved by using an optional modifier (`?`) in the URLPattern's pathname, which makes the preceding prefix separator also optional.

```javascript
// Service worker controlling /maps and everything under /maps/.
// Does not control /mapsearch.
navigator.serviceWorker.register('/maps/maps-sw.js', {
  scope: new URLPattern({
    baseURL: self.location,
    pathname: '/maps/*?'
  })
});
```

--------------------------------

### Define Custom Regular Expression Groups in URLPattern (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Shows how to embed a custom regular expression directly within a `URLPattern` group. It demonstrates testing the pattern with `test()` and extracting the matched value using `exec()`.

```js
const pattern = new URLPattern({ pathname: "/(foo|bar)" });

// Prints `true`
console.log(pattern.test({ pathname: "/foo" }));

// Prints `true`
console.log(pattern.test({ pathname: "/bar" }));

// Prints `false`
console.log(pattern.test({ pathname: "/baz" }));

const result = pattern.exec({ pathname: "/foo" });

// Prints `foo`
console.log(result.pathname.groups[0]);
```

--------------------------------

### Make URLPattern Matching Groups Repeated with '+' Modifier (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Illustrates how to make a matching group repeatable by adding a `+` modifier. In pathname patterns, the preceding `/` character is also repeated with the group, allowing multiple occurrences of the matched segment.

```js
const pattern = new URLPattern({ pathname: "/product/:action+" });
const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });

// `do/some/thing/cool`
result.pathname.groups.action;

// Prints `false`
console.log(pattern.test({ pathname: "/product" }));
```

--------------------------------

### Make URLPattern Matching Groups Optional with '?' Modifier (JavaScript)

Source: https://github.com/whatwg/urlpattern/blob/main/mdn-drafts/QUICK-REFERENCE.md

Demonstrates how to make a matching group optional by appending a `?` modifier. For pathname components, this also makes the preceding `/` character optional, allowing the pattern to match with or without the group's content.

```js
const pattern = new URLPattern({ pathname: "/product/(index.html)?" });

// Prints `true`
console.log(pattern.test({ pathname: "/product/index.html" }));

// Prints `true`
console.log(pattern.test({ pathname: "/product" }));

const pattern2 = new URLPattern({ pathname: "/product/:action?" });

// Prints `true`
console.log(pattern2.test({ pathname: "/product/view" }));

// Prints `true`
console.log(pattern2.test({ pathname: "/product" }));

// Wildcards can be made optional as well.  This may not seem to make sense
// since they already match the empty string, but it also makes the prefix
// `/` optional in a pathname pattern.
const pattern3 = new URLPattern({ pathname: "/product/*?" });

// Prints `true`
console.log(pattern3.test({ pathname: "/product/wanderview/view" }));

// Prints `true`
console.log(pattern3.test({ pathname: "/product" }));

// Prints `true`
console.log(pattern3.test({ pathname: "/product/" }));
```
Tokens:
Raw