logo

Eenvoudig URL's parseren in JavaScript met parse-url

Inleiding

Het parseren van URL's is een veelvoorkomende taak die moet worden uitgevoerd tijdens webontwikkeling, en ook een die eenvoudig lijkt maar complex kan worden. Je komt niet vaak een module tegen die het ontleden zo makkelijk maakt dat je zelf niet veel hoeft na te denken.

Ondanks dat hij relatief jong is (gepubliceerd in juni 2021), met bijna 3 miljoen wekelijkse downloads, parse-url is een van de beste modules voor het ontleden van URL's in JavaScript.

Delen van een URL

Een URL heeft veel onderdelen, dus het is een krachtig hulpmiddel om het in stukjes en beetjes op te splitsen zonder pure string-parsing. Elke URL heeft dezelfde hoofdonderdelen, terwijl andere onderdelen optioneel zijn, afhankelijk van de zoekopdracht of actie.

De samenstellende elementen van een URL zijn:

  • Schema - gebruikt om het protocol te identificeren dat wordt gebruikt om de bron op internet op te halen
    • Enkele van de meer populaire protocollen zijn:HTTP, HTTPS, IP, ICMP, TCP, UDP , enz.
  • Host - de naam van de host die de bron heeft die we krijgen (www.somehost.com )
  • Pad - het pad naar de bron op de host (www.somehost.com/path/to/index.html )
  • Querytekenreeks - tekenreeks met sleutelwaarde paren (www.somehost.com/index?key=value&key2=value2 )

Dit zijn de belangrijkste delen van de URL, maar we zullen zien dat we nog meer kunnen ophalen met parse-url , in een zeer leesbare en opnieuw , parseerbaar formaat.

De parse-url-module installeren en instellen

We beginnen met het maken van een map voor ons miniproject genaamd parse_url . In de map kunnen we de module installeren met npm :

$ npm i parse-url

Om de module in onze code te gebruiken (in de index.js bestand), moeten we require het:

const parseUrl = require('parse-url');

Dat is het, we zijn klaar om te gaan! Laten we eens kijken wat deze module biedt.

De URL ontleden

Laten we om te beginnen een eenvoudige URL nemen:https://www.stackabuse.com . De constructor voor parseUrl neemt twee parameters op, string_url en normalize , met normalize optioneel zijn.

Standaard is deze ingesteld op false en er wordt aangenomen dat de aangeleverde URL's al zijn genormaliseerd. Wanneer true , het transformeert een niet-genormaliseerde URL naar een genormaliseerde. Bijvoorbeeld:

someRandomUrl.com:80 --> http://someRandomUrl.com

Dit heet URL-normalisatie . De parse-url module baseert zijn normalisatie op de normalize-url module en de normalize-url module werkt precies zoals hierboven weergegeven.

Laten we een URL ontleden:

const url = 'https://www.stackabuse.com/';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

De uitvoer van de code is in JSON-indeling, die bestaat uit de elementen van die URL:

{
  protocols: [ 'https' ],
  protocol: 'https',
  port: null,
  resource: 'www.stackabuse.com',
  user: '',
  pathname: '',
  hash: '',
  search: '',
  href: 'https://www.stackabuse.com',
  query: [Object: null prototype] {}
}

Zoals je kunt zien, zijn er veel dingen geëxtraheerd, hoewel sommige leeg zijn omdat de URL die we hebben verstrekt vrij kaal is. Laten we eens kijken naar de elementen in deze JSON:

  • protocols - lijst met protocollen die in de URL worden gebruikt (kan meer zijn)
  • protocol - eerste van protocols
  • port - een poort (indien meegeleverd)
  • resource - de gastheer
  • user - gebruiker op de server van de host ([email protected] )
  • pathname - pad naar bron
  • hash - indien geleverd, info na de # (hash) - verankert meestal op een webpagina
  • search - een vraagtekenreeks
  • href - de volledige URL

Een interessant voorbeeld wordt gevonden met behulp van GitHub-links, een van de redenen waarom deze module in de eerste plaats is gemaakt. GitHub-links kunnen behoorlijk complex en ingewikkeld worden in vergelijking met andere URL's die u dagelijks ziet, en kunnen meerdere protocollen en gebruikers bevatten:

const url = 'git+ssh://[email protected]/path/to/resource.git';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Dit resulteert in:

Gratis eBook:Git Essentials

Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde standaarden en het meegeleverde spiekbriefje. Stop met Googlen op Git-commando's en leer actually het!

{
  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] {}
}

Het lijstprotocol hier is gewijzigd, aangezien er meerdere protocollen in gebruik zijn. Er wordt echter naar de eerste verwezen bij het afdrukken van de URL-info. We kunnen ook pathname . zien is nu gevuld met het pad naar de bron.

Een van de verkoopargumenten van parse-url is het feit dat het zo goed werkt met Git URL's.

Laten we de URL echt verhogen en een hash en een aantal sleutel/waarde-query's opnemen:

const url = 'git+ssh://[email protected]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Dit voorbeeld wijkt een klein beetje af van het vorige, net genoeg om de lege waarden in het vorige voorbeeld in te vullen. De uitvoer zal zijn:

{
  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' }
}

De poort, hash en query zijn nu aanwezig - en we hebben zelfs de sleutels en waarden voor de query! Als de geparseerde gegevens worden gestructureerd in een voor mensen leesbare indeling, die ook universeel wordt geaccepteerd en gemakkelijk te parseren, is dit echt een helpende hand bij het parseren van URL's.

Dit is echter alleen de mooi afgedrukte uitvoer van het geretourneerde object. Wat stelt ons in staat om echt werken met deze geparseerde elementen is het feit dat het allemaal velden zijn van het geretourneerde object, waartoe we gemakkelijk toegang hebben:

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);

Het uitvoeren van deze code resulteert in:

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

Laten we tot slot eens kijken naar de resultaten van URL-normalisatie. Als we een niet-genormaliseerde URL doorgeven, zoals stackabuse.com:3000/path/to/index.html#anchor , als een URL-tekenreeks:

const url = 'stackabuse.com:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);

Dit resulteert in:

{
  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] {}
}

We kunnen zien dat de parser automatisch http . heeft toegewezen als het protocol en vulde de href . in eigendom correct. De ontbrekende onderdelen zijn niet ingevuld, omdat ze niet zijn geleverd om mee te beginnen.

Als we de normalisatiefunctie zouden uitschakelen, terwijl we een niet-genormaliseerde URL verstrekken, zouden de resultaten uit zijn:

{
  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] {}
}

Opmerking: Als u normalize . instelt tot true en een reeds genormaliseerde URL opgeeft, gebeurt er niets en wordt het correct geparseerd. Met dit in gedachten, wil je de parameter meestal op true zetten.

Sinds parsedUrl een object is, kunnen de eigenschappen ervan worden gewijzigd. We kunnen eenvoudig toegang krijgen tot elke eigenschap en deze wijzigen:

console.log(parsedUrl.port) // 3000
parsedUrl.port = 4000
console.log(parsedUrl.port) // 4000

Dit is echter niet het gewenste gedrag en zou ook niet moeten worden gedaan, aangezien deze module uitsluitend wordt gebruikt om de URL's te ontleden. De enige keer dat u de parsedUrl . moet wijzigen object als dit is wanneer je zeker bent van de waarde van een eigendom, anders schiet je jezelf misschien in het been.

Conclusie

We hebben parse-url gezien laat ons vrij eenvoudig URL's ontleden zonder enige extra verwerking, en maakt het proces van het ontleden van URL's uiterst eenvoudig en leesbaar.

Het splitst alles naar wens op en creëert een parsedUrl object dat net als elk ander object toegankelijk is, en ook kan worden gewijzigd. De module is zo eenvoudig als ze zijn, met een nette uitvoer en syntaxis en zo eenvoudig mogelijk, wat resulteert in snelle en nauwkeurige resultaten.