Hemanth.HM

A Computer Polyglot, CLI + WEB ♥'r.

URLPattern API

| Comments

The URLPattern web API is an URL pattern matching web-platform primitive as a generic javascript code. Also helps in controlling service worker to the subset of a site that it owns and maintains.

URLPattern() constructor accepts an Object as in input param as in the sample usage and and has test() and exec() methods.

Currently there is a partial implementation of URLPattern available in Chrome Canary under the "Experimental Web Platform features" flag.

Sample usage:

1
2
3
4
5
6
7
8
9
10
11

// Takes an Object as a param with the below options
new URLPattern({
    protocol: "https",
    username: "",
    password: "",
    hostname: "example.com",
    port: "",
    pathname: "/foo/bar/:image.jpg",
    search: "(.*)",
    hash: "(.*)",
});

1
2
3
4

// Say you want to match the pathname of `/products/(.*)`
const productsPattern = new URLPattern({ "pathname": "/products/(.*)" })

productsPattern.exec({ "pathname": "/products/cars" }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// Would return
{
    "hash": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "hostname": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "input": {
        "pathname": "/products/cars"
    },
    "password": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "pathname": {
        "groups": {
            "0": "cars"
        },
        "input": "/products/cars"
    },
    "port": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "protocol": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "search": {
        "groups": {
            "0": ""
        },
        "input": ""
    },
    "username": {
        "groups": {
            "0": ""
        },
        "input": ""
    }
}

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8

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

1
2
3
4
5
6
7
8
9
10
11
12

// input, pathname, and groups
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?q=v'
console.log(r.input);

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

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

In serviceworker:

1
2
3
4
5
6
7
8

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

We also have the URLPatternList API in the proposals, that would help to do something like:

1
2
3
4
5

// Match any URL ending with 'jpg' or 'png'.
const p = new URLPatternList([
    { pathname: "/*.:filetype(jpg)" },
    { pathname: "/*.:filetype(png)" },
]);

URLPattern API is highly influenced by path-to-regexp node module and support many of the features including:

  • "*" wildcards
  • named matching groups
  • regexp groups
  • group modifiers such as "?", "+", and "*"

Don't miss read the Design Document for URLPattern API.

Comments