Parsování URL v JavaScriptu

1. února 2017 JavaScript Rady a nápady

Jak elegantně parsovat adresy webových stránek v JavaScriptu.

URL API
Punycode
Parsování URL v PHP

V případě, že máme URL a potřebujeme z ní JavaScriptem získat jednotlivé části jako například:

protokol,
název domény,
cestu k souboru,
parametry za otazníkem (query string),
hash (obsah za #)

Je řešení buď používat regulární výrazy, nebo využít toho, že všechny tyto údaje umí JavaScript snadno vytáhnout ze značky <a>.

V prohlížečích novějších než IE 11, jde použít rovnou URL API.

Vytvoříme-li proto odkaz a nastavíme-li mu požadovanou URL, potřebné údaje získáme velmi elegantně.

var adresa = "http://example.com/cesta/skritp.php?promena=1#kotva";
var odkaz = document.createElement("a");
odkaz.href = adresa;

protocol: Bude dostupný ve vlastnosti odkaz.protocol, zpravidla http: nebo https: (včetně dvojtečky).
hostname: Název domény bude v odkaz.hostname.
pathname: Cesta ke skriptu – odkaz.pathname.
search: Obsah za otazníkem – odkaz.search.
hash: Obsah za mřížkou včetně té mřížky – odkaz.hash.
port: Získat je možné i port (je-li uveden v URL) – odkaz.port. To ale bývá velmi zřídka.

Zjednodušená ukázka pro testování ve starých prohlížečích.

URL API

V nových prohlížečích (mimo IE) existuje URL API. Tím odpadá potřeba parsovat URL přes vytváření odkazu, ale jde jít hezky na přímo.

const url = new URL("http://example.com:8080/cesta/skript.php?promena=1#kotva")

Výstupem je:

hash: "#kotva"
host: "example.com:8080"
hostname: "example.com"
href: "http://example.com:8080/cesta/skript.php?promena=1#kotva"
origin: "http://example.com:8080"
password: ""
pathname: "/cesta/skript.php"
port: "8080"
protocol: "http:"
search: "?promena=1"
searchParams: URLSearchParams {}
username: ""

Pokud parametr předávaný do URL nemusí být validní, nabízí se to celé obalit do try – catch bloku:

Přísnější validace URL tak může vypadat třeba takto:

export const validateUrl = (webUrl: string) => {
  try {
    const url = new URL(webUrl)

    const isProtocolValid = ['http:', 'https:'].includes(url.protocol)

    const hostnameParts = url.hostname.split('.')
    const isTldExist = hostnameParts.filter(part => part.length > 0).length > 1

    const tld = hostnameParts[hostnameParts.length - 1]
    const isTldNaN = isNaN(parseInt(tld))

    const isTldTwoMoreChars = tld.length >= 2

    return isProtocolValid && isTldExist && isTldNaN && isTldTwoMoreChars
  } catch (_e) {
    return false
  }
}