🤝💝 Web Standards

Anatomy of a URL

Change the parts of a URL

https://example.org/songs?first=20&sortBy=releaseDate

Live code snippets

JavaScript’s URL

const url = new URL(
  'https://example.org/songs?first=20&sortBy=releaseDate'
);
url.protocol; // 'https:'
url.host; // 'example.org'
url.origin; // 'https://example.org'
url.pathname; // '/songs'

url.search; // '?first=20&sortBy=releaseDate'
const query = new URLSearchParams(url.search);
query.get('first'); // '20'
query.get('sortBy'); // 'releaseDate'

Swift’s URL

let url = URL(
  string: "https://example.org/songs?first=20&sortBy=releaseDate"
)!
url.scheme // Optional("https")
url.host // Optional("example.org")
url.path // "/songs"
url.query // Optional("first=20&sortBy=releaseDate")

Golang’s net/url

import (
  "log"
  "net/url"
)

exampleURL, err := url.Parse(
  "https://example.org/songs?first=20&sortBy=releaseDate"
)
if err != nil {
  log.Fatal(err)
}
exampleURL.Scheme // "https"
exampleURL.Host // "example.org"
exampleURL.Path // "/songs"

exampleURL.RawQuery // "first=20&sortBy=releaseDate"
query, err := url.ParseQuery(exampleURL.RawQuery)
if err != nil {
  log.Fatal(err)
}
query.Get("first") // "20"
query.Get("sortBy") // "releaseDate"

JavaScript’s URL

const root = new URL('/');
// In a browser
const current = new URL(window.location.href);
// With a fetch Request
const current = new URL(request.url);

Elixir’s URI

url = URI.parse("https://www.example.org/")