URL and Network Information

URL (Baseline Widely available since January 2018) parses hostname, port, pathname, search and hash, resolves relative references, and exposes the query as URLSearchParams, which encodes values for you. URL.canParse() and URL.parse() (returns null instead of throwing) validate input, and URLPattern (Newly available since September 2025) matches routes.

Parsing, building and matching URLsHTMLLive

<pre id="out" style="font: 15px monospace"></pre>
<script>
  const u = new URL('https://shop.example:8080/watch?name=G%20Shock#specs');
  u.searchParams.set('color', 'black & white');
  out.textContent = [
    `${u.port} | ${u.searchParams.get('name')} | ${u.search}`,
    new URL('../cats', 'https://example.com/pets/dogs').href,
    `${URL.canParse('not a url')} ${URL.parse('/relative')}`,
    new URLPattern({ pathname: '/books/:id' }).exec('https://x.dev/books/42').pathname.groups.id,
    `effectiveType ${navigator.connection?.effectiveType}, rtt ${navigator.connection?.rtt} ms`,
  ].join('\n');
</script>

Browser output of 11

The Network Information API (navigator.connection) estimates effectiveType, rtt, downlink and saveData, but only Chromium 4,389 exposes it: use it as a hint, such as lighter images, never as a requirement.

MENU

URL and Network Information