Úvod
Analýza adres URL je běžný úkol, který se provádí během vývoje webu, a také úkol, který se zdá být jednoduchý, ale může být složitý. Nestává se často, že byste narazili na modul, díky kterému je analýza tak snadná, že sami nemusíte moc přemýšlet.
Přestože je relativně mladý (publikováno v červnu 2021), s téměř 3 miliony stažení týdně, parse-url je jedním z nejlepších modulů pro analýzu adres URL v JavaScriptu.
Části adresy URL
Adresa URL má mnoho částí, takže její rozdělení na kousky bez čisté analýzy řetězců je mocný nástroj. Každá adresa URL má stejné hlavní části, přičemž ostatní části jsou volitelné v závislosti na dotazu nebo akci.
Základní prvky adresy URL jsou:
- Schéma - používá se k identifikaci protokolu používaného k načtení zdroje na internetu
- Některé z populárnějších protokolů jsou:HTTP, HTTPS, IP, ICMP, TCP, UDP atd.
- Hostitel - název hostitele, který má zdroj, který získáváme (
www.somehost.com) - Cesta - cesta ke zdroji umístěnému na hostiteli (
www.somehost.com/path/to/index.html) - Řetězec dotazu - řetězec obsahující pár klíč–hodnota párů (
www.somehost.com/index?key=value&key2=value2)
Toto jsou hlavní části adresy URL, ale uvidíme, že pomocí parse-url můžeme získat ještě více , ve velmi čtivém a opět , analyzovatelný formát.
Instalace a nastavení modulu parse-url
Začneme vytvořením složky pro náš mini projekt s názvem parse_url . Do složky můžeme nainstalovat modul pomocí npm :
$ npm i parse-url
Chcete-li použít modul v našem kódu (v index.js soubor), musíme require to:
const parseUrl = require('parse-url');
To je vše, můžeme vyrazit! Podívejme se, co tento modul nabízí.
Analyzovat adresu URL
Pro začátek si vezměme jednoduchou adresu URL:https://www.stackabuse.com . Konstruktor pro parseUrl má dva parametry, string_url a normalize , s normalize je nepovinné.
Ve výchozím nastavení je nastavena na false a předpokládá se, že dodávané adresy URL jsou již normalizovány. Když true , transformuje nenormalizovanou adresu URL na normalizovanou. Například:
someRandomUrl.com:80 --> http://someRandomUrl.com
Toto se nazývá normalizace adresy URL . parse-url modul zakládá svou normalizaci na normalize-url modul a normalize-url modul funguje přesně tak, jak je uvedeno výše.
Pojďme analyzovat adresu URL:
const url = 'https://www.stackabuse.com/';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
Výstup kódu bude ve formátu JSON, který se skládá z prvků této adresy URL:
{
protocols: [ 'https' ],
protocol: 'https',
port: null,
resource: 'www.stackabuse.com',
user: '',
pathname: '',
hash: '',
search: '',
href: 'https://www.stackabuse.com',
query: [Object: null prototype] {}
}
Jak vidíte, bylo extrahováno mnoho věcí, i když některé jsou prázdné, protože adresa URL, kterou jsme poskytli, je docela holá. Pojďme se podívat na prvky v tomto JSON:
protocols- seznam protokolů použitých v URL (může jich být více)protocol- první zprotocolsport- port (pokud je dodán)resource- hostiteluser- uživatel na hostitelském serveru ([email protected] )pathname- cesta ke zdrojihash- pokud je dodáno, informace za#(hash) – obvykle kotví na webové stráncesearch- řetězec dotazuhref– úplnou adresu URL
Zajímavý příklad lze nalézt pomocí odkazů GitHub, které byly jedním z důvodů, proč byl tento modul vůbec vytvořen. Odkazy GitHub mohou být v porovnání s jinými adresami URL, které denně vidíte, poměrně složité a spletité a mohou zahrnovat více protokolů a uživatelů:
const url = 'git+ssh://[email protected]/path/to/resource.git';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
Výsledkem je:
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
{
protocols: [ 'git', 'ssh' ],
protocol: 'git',
port: null,
resource: 'somehost.com',
user: 'git',
pathname: '/path/to/resource.git',
hash: '',
search: '',
href: 'git+ssh://[email protected]/path/to/resource.git',
query: [Object: null prototype] {}
}
Protokol seznamu se zde změnil, protože se používá více protokolů. Na první se však odkazuje při tisku informací o URL. Můžeme také vidět pathname je nyní vyplněno cestou ke zdroji.
Jeden z prodejních míst parse-url je fakt, že to tak dobře funguje s adresami URL Git.
Upravme adresu URL a zahrneme hash a několik dotazů na pár klíč–hodnota:
const url = 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
Tento příklad se od předchozího liší jen o malý kousek, stačí jen vyplnit prázdné hodnoty v předchozím příkladu. Výstup bude:
{
protocols: [ 'git', 'ssh' ],
protocol: 'git',
port: 30,
resource: 'somehost.com',
user: 'git',
pathname: '/path/to/resource.git',
hash: 'anchor',
search: 'key1=value1&key2=value2',
href: 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor',
query: [Object: null prototype] { key1: 'value1', key2: 'value2' }
}
Port, hash a dotaz jsou nyní přítomny - a dokonce máme klíče a hodnoty pro dotaz! Když jsou analyzovaná data strukturována ve formátu čitelném pro člověka, který je také všeobecně přijímaný a snadno analyzovatelný, je to opravdu pomocná ruka při analýze adres URL.
Toto je však pouze pěkně vytištěný výstup vráceného objektu. Co nám umožňuje skutečně práce s těmito analyzovanými prvky spočívá v tom, že jsou to všechna pole vráceného objektu, ke kterým máme snadný přístup:
console.log("The protocols used in the URL are " + parsedUrl.protocols);
console.log("The port used in the URL is " + parsedUrl.port);
console.log("The resource in the URL is " + parsedUrl.resource);
console.log("The user in the URL is " + parsedUrl.user);
console.log("The pathname in the URL is " + parsedUrl.pathname);
console.log("The hash in the URL is " + parsedUrl.hash);
console.log("The search part in the URL is " + parsedUrl.search);
console.log("Full URL is " + parsedUrl.href);
Spuštění tohoto kódu má za následek:
The protocols used in the URL are git,ssh
The port used in the URL is 30
The resource in the URL is somehost.com
The user in the URL is git
The pathname in the URL is /path/to/resource.git
The hash in the URL is anchor
The search part in the URL is key1=value1&key2=value2
Full URL is git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor
Nakonec se podívejme na výsledky normalizace URL. Pokud předáme nenormalizovanou adresu URL, například stackabuse.com:3000/path/to/index.html#anchor , jako řetězec adresy URL:
const url = 'stackabuse.com:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);
Výsledkem je:
{
protocols: [ 'http' ],
protocol: 'http',
port: 3000,
resource: 'stackabuse.com',
user: '',
pathname: '/path/to/index.html',
hash: 'anchor',
search: '',
href: 'http://stackabuse.com:3000/path/to/index.html#anchor',
query: [Object: null prototype] {}
}
Vidíme, že analyzátor automaticky přiřadil http jako protokol a vyplňte href vlastnost správně. Chybějící části nejsou vyplněny, protože nebyly dodány.
Pokud bychom zakázali funkci normalizace a zároveň poskytli nenormalizovanou adresu URL, výsledky by byly vypnuté:
{
protocols: [],
protocol: 'file',
port: null,
resource: '',
user: '',
pathname: 'stackabuse.com:3000/path/to/index.html',
hash: 'anchor',
search: '',
href: 'stackabuse.com:3000/path/to/index.html#anchor',
query: [Object: null prototype] {}
}
Poznámka: Pokud nastavíte normalize na true a dodáte již normalizovanou adresu URL, ve skutečnosti se nic nestane a bude správně analyzována. Vzhledem k tomu - obvykle budete chtít nastavit parametr na hodnotu true.
Od parsedUrl je objekt, jeho vlastnosti lze měnit. Můžeme jednoduše přistupovat k jakékoli vlastnosti a změnit ji:
console.log(parsedUrl.port) // 3000
parsedUrl.port = 4000
console.log(parsedUrl.port) // 4000
Toto však není žádoucí chování a nemělo by se to dělat, protože tento modul se používá výhradně k analýze adres URL. Jediný čas, kdy byste měli změnit parsedUrl takový předmět je, když jste si jisti hodnotou nějakého majetku, jinak byste se mohli střelit do nohy.
Závěr
Viděli jsme parse-url nám umožňuje poměrně snadno analyzovat adresy URL bez dalšího zpracování a činí proces analýzy adres URL extrémně jednoduchým a čitelným.
Vše rozdělí podle potřeby a vytvoří parsedUrl objekt, ke kterému lze přistupovat stejně jako k jakémukoli jinému objektu, a také jej měnit. Modul je tak jednoduchý, jak přicházejí, s úhledným výstupem a syntaxí a tak přímočarý, jak je to jen možné, což vede k rychlým a přesným výsledkům.