Objekty URL

Zabudovaná třída URL poskytuje vhodné rozhraní pro vytváření a parsování URL adres.

Žádná metoda pro práci se sítí nevyžaduje přímo URL objekt, vÅ¡em postačují Å™etÄ›zce. Technicky tedy nemusíme URL používat. NÄ›kdy vÅ¡ak může být opravdu nápomocná.

Vytvoření URL

Syntaxe pro vytvoÅ™ení nového URL objektu je následující:

new URL(url, [báze])

• url – úplná URL nebo cesta (pokud je nastavena báze, viz níže),
• báze – nepovinná bázová URL: pokud je nastavena a argument url obsahuje pouze cestu, pak se URL vygeneruje relativnÄ› vůči báze.

Příklad:

let url = new URL('https://javascript.info/profile/admin');

Tyto dvě URL jsou stejné:

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin

Můžeme snadno vytvořit novou URL z relativní cesty vzhledem k existující URL:

let url = new URL('https://javascript.info/profile/admin');
let nováURL = new URL('tester', url);

alert(nováURL); // https://javascript.info/profile/tester

Objekt URL nám umožňuje okamžitÄ› pÅ™istupovat ke svým komponentám, takže je to pÄ›kný způsob, jak parsovat URL, například:

let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url

Zde je přehled komponent URL:

• href je úplná URL, totéž jako url.toString()
• protocol končí dvojtečkou :
• search – Å™etÄ›zec parametrů, začíná otazníkem ?
• hash začíná znakem hashe #
• pokud je přítomna HTTP autentifikace, mohou tam být i vlastnosti user (uživatel) a password (heslo): http://login:[email protected] (v pÅ™ehledu nezobrazeno, používá se zřídka).

SearchParams „?…“

Dejme tomu, že chceme vytvoÅ™it URL se zadanými vyhledávacími parametry, například https://google.com/search?query=JavaScript.

Můžeme je poskytnout v řetězci URL:

new URL('https://google.com/search?query=JavaScript')

…Parametry však musejí být zakódovány, jestliže obsahují mezery, nelatinská písmena a podobně (podrobnosti dále).

K tomu slouží URL vlastnost: url.searchParams, objekt typu URLSearchParams.

Ten poskytuje vhodné metody pro vyhledávací parametry:

• append(název, hodnota) – pÅ™idá parametr s názvem název,
• delete(název) – odstraní parametr s názvem název,
• get(název) – vrátí parametr s názvem název,
• getAll(název) – vrátí vÅ¡echny parametry s názvem název (to je dovoleno, napÅ™. ?uživatel=Jan&uživatel=Petr),
• has(název) – ověří existenci parametru s názvem název,
• set(název, hodnota) – nastaví nebo nahradí parametr s názvem název,
• sort() – seÅ™adí parametry podle názvů, potÅ™ebná jen zřídka,
• …a je také iterovatelný, podobnÄ› jako Map.

Příklad s parametry, které obsahují mezery a interpunkční znaménka:

let url = new URL('https://google.com/search');

url.searchParams.set('q', 'otestuj mne!'); // přidán parametr s mezerou a vykřičníkem !

alert(url); // https://google.com/search?q=otestuj+mne%21

url.searchParams.set('tbs', 'qdr:y'); // přidán parametr s dvojtečkou :

// parametry se automaticky zakódují
alert(url); // https://google.com/search?q=otestuj+mne%21&tbs=qdr%3Ay

// iterace nad vyhledávacími parametry (dekódovanými)
for(let [název, hodnota] of url.searchParams) {
  alert(`${název}=${hodnota}`); // q=otestuj mne!, pak tbs=qdr:y
}

Kódování

Znaky, které jsou v URL povoleny a které ne, definuje standard RFC3986.

Ty, které nejsou povoleny, například nelatinská písmena a mezery, musejí být zakódovány – nahrazeny svými UTF-8 kódy s pÅ™edponou %, napÅ™. %20 (mezeru lze z historických důvodů zakódovat jako +, ale to je výjimka).

Dobrá zpráva je, že objekty URL to automaticky oÅ¡etÅ™ují. Stačí pÅ™edat vÅ¡echny parametry nezakódované a pak pÅ™evést URL na Å™etÄ›zec:

// v tomto příkladu použijeme některé znaky z kyrilice

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ÑŠ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A

Jak vidíte, byly zakódovány Тест v URL cestÄ› i ÑŠ v parametru.

URL se prodloužila, neboÅ¥ každé písmeno kyrilice je v UTF-8 reprezentováno dvÄ›ma byty, a tak pro nÄ› byly vytvoÅ™eny dvÄ› entity %...

Kódování řetězců

V dřívÄ›jších dobách, než se objevily objekty URL, lidé používali pro URL Å™etÄ›zce.

V současnosti jsou objekty URL často vhodnÄ›jší, ale stále je možné používat i Å™etÄ›zce. V mnoha případech pÅ™i použití Å™etÄ›zců dostaneme kratší kód.

Pokud však používáme řetězce, musíme speciální znaky zakódovat a dekódovat ručně.

K tomu slouží zabudované funkce:

• encodeURI – zakóduje URL jako celek.
• decodeURI – dekóduje ji zpÄ›t.
• encodeURIComponent – zakóduje URL komponentu, napÅ™. vyhledávací parametr, kontrolní součet nebo cestu.
• decodeURIComponent – dekóduje ji zpÄ›t.

Naskýtá se pÅ™irozená otázka: „Jaký je rozdíl mezi encodeURIComponent a encodeURI? Kdy bychom mÄ›li kterou z nich použít?"

Snadno tomu porozumíme, když se podíváme na URL, která je rozdělena na komponenty ve výše uvedeném obrázku:

https://site.com:8080/path/page?p1=v1&p2=v2#hash

Jak vidíme, znaky jako :, ?, =, &, # jsou v URL povoleny.

…Naproti tomu když se podíváme na samostatnou URL komponentu, např. vyhledávací parametr, tyto znaky musejí být zakódovány, aby se nerozbilo formátování.

• encodeURI zakóduje pouze znaky, které jsou v URL zcela zakázány.
• encodeURIComponent zakóduje tytéž znaky a navíc jeÅ¡tÄ› znaky #, $, &, +, ,, /, :, ;, =, ? a @.

Pro celou URL tedy můžeme použít encodeURI:

// použijeme v URL cestě znaky z kyrilice
let url = encodeURI('http://site.com/привет');

alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82

…Zatímco pro URL parametry bychom místo ní mÄ›li použít encodeURIComponent:

let hudba = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${hudba}`;
alert(url); // https://google.com/search?q=Rock%26Roll

Srovnejte si to s encodeURI:

let hudba = encodeURI('Rock&Roll');

let url = `https://google.com/search?q=${hudba}`;
alert(url); // https://google.com/search?q=Rock&Roll

Jak vidíme, encodeURI nezakódovala &, protože to je v celé URL legitimní znak.

UvnitÅ™ vyhledávacího parametru bychom vÅ¡ak mÄ›li & zakódovat, jinak dostaneme q=Rock&Roll – což je ve skutečnosti q=Rock plus nÄ›jaký obskurní parametr Roll. To není to, co jsme zamýšleli.

Pro každý vyhledávací parametr bychom tedy mÄ›li používat jen encodeURIComponent, aby jej do URL Å™etÄ›zce vložila korektnÄ›. NejbezpečnÄ›jším způsobem je zakódovat název i hodnotu, pokud si nejsme absolutnÄ› jisti, že obsahují výhradnÄ› povolené znaky.

// platná URL s IPv6 adresou
let url = 'http://[2607:f8b0:4005:802::1007]/';

alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/
alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/