De Lazy Mans URL Parsing in JavaScript

Heb je ooit een URL moeten ontleden met behulp van reguliere expressies? Het is niet eenvoudig om reguliere expressies te schrijven (voor veel mensen, waaronder ikzelf) en het is nog moeilijker om te testen of die reguliere expressie in elke situatie betrouwbaar is. Je kunt natuurlijk gewoon een reguliere expressie (of functie of bibliotheek) die iemand anders heeft ontwikkeld kopiëren en plakken, maar ik stel voor dat er een eenvoudigere en beknoptere manier is om URL's te ontleden waarvoor geen reguliere expressies nodig zijn .

Deze methode - oorspronkelijk gepost op Github door John Long, hoewel waarschijnlijk niet oorspronkelijk door hem ontdekt - maakt gebruik van native parsing-mogelijkheden die in de DOM zijn ingebouwd om u eenvoudig toegang te geven tot de delen van een URL door simpelweg de eigenschappen van een ankerelement op te vragen. Check it out:

1
2
3
4
5
6
7
8
9
10

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

Deze code wordt rechtstreeks uit de Gist gehaald die John Long op de bovenstaande link plaatste. Ik heb geen uitspraken gezien over met welke browsers dit werkt, maar ik aangenomen dat het op zijn minst met alle moderne browsers werkt. Als u het niet vertrouwt, kunt u het zelf testen of een bibliotheek gebruiken zoals URI.js.

Een van de coolste dingen van deze methode is dat je een gedeeltelijke/relatieve URL kunt invoeren in de href eigenschap en de browser maakt er een volledige URL van, net zoals het gedeeltelijke URL's op echte HTML-links vertaalt naar volledige URL's. Probeer dit bijvoorbeeld met uw browserconsole op deze pagina:

1
2
3
4

var parser = document.createElement('a');
parser.href = "/";

parser.href; // => "/"

Je kunt ook gewoon een lege string gebruiken voor de href en het zou je je huidige URL geven (maar de hash niet), maar dit is zonde omdat window.location heeft exact dezelfde eigenschappen, dus je hoeft daar niet eens een ankerelement voor te maken.

In al deze voorbeelden moet je de queryreeks nog steeds ontleden, maar je hebt hem tenminste uit de URL gehaald.

UrlParsing.com/Conclusion#Paragraph

Ik weet dat dit korter is dan mijn gebruikelijke berichten, maar ik denk dat je nog steeds iets heel waardevols hebt geleerd, ervan uitgaande dat je dit nog niet ergens anders hebt gehoord. Ik wou dat ik dit een tijdje geleden wist toen ik eigenlijk een project aan het doen was waarbij ik een URL moest ontleden. Zorg ervoor dat u de ontledingstechniek verspreidt onder al uw JavaScript-programmeervrienden en laat hieronder uw opmerkingen achter. Veel plezier met coderen!

BEWERKEN:

Ik heb een bericht gevonden waarin staat dat dit niet werkt in IE6 omdat de href eigenschap wordt niet geparseerd tot een volledige URL, tenzij deze wordt geparseerd door de HTML-parser. Er is echter een eenvoudige oplossing die de HTML-parser dwingt er overheen te gaan:

1
2
3
4
5
6
7

function canonicalize(url) {
    var div = document.createElement('div');
    div.innerHTML = "<a></a>";
    div.firstChild.href = url; // Ensures that the href is properly escaped
    div.innerHTML = div.innerHTML; // Run the current innerHTML back through the parser
    return div.firstChild.href;
}