Analýza adresy URL Lazy Mans v JavaScriptu

Potřebovali jste někdy analyzovat URL pomocí regulárních výrazů? Není snadné psát regulární výrazy (pro mnoho lidí včetně mě) a ještě těžší je otestovat, zda je tento regulární výraz spolehlivý v každé situaci. Můžete samozřejmě jen zkopírovat a vložit regulární výraz (nebo funkci nebo knihovnu), který vyvinul někdo jiný, a použít jej, ale navrhuji, že existuje jednodušší a výstižnější způsob analýzy adres URL, který nevyžaduje žádné regulární výrazy. .

Tato metoda – původně zveřejněná na Githubu Johnem Longem, ačkoli ji pravděpodobně původně neobjevil – využívá nativní schopnosti analýzy zabudované do DOM, aby vám poskytla jednoduchý přístup k částem adresy URL pouhým dotazováním na vlastnosti prvku kotvy. Podívejte se na to:

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"

Tento kód je stažen přímo z Gist, který John Long zveřejnil na výše uvedeném odkazu. Neviděl jsem žádná prohlášení o tom, se kterými prohlížeči to funguje, ale předpokládám že minimálně funguje se všemi moderními prohlížeči. Pokud tomu nedůvěřujete, můžete to buď otestovat sami, nebo použít knihovnu, jako je URI.js.

Jednou z nejúžasnějších věcí na této metodě je, že můžete zadat částečnou/relativní adresu URL do href vlastnost a prohlížeč z ní udělá úplnou adresu URL, stejně jako převádí částečné adresy URL na skutečných odkazech HTML na úplné adresy URL. Zkuste to například pomocí konzole prohlížeče na této stránce:

1
2
3
4

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

parser.href; // => "/"

Můžete také použít prázdný řetězec pro href a poskytlo by vám vaši aktuální adresu URL (nezahrnuje však hash), ale to je plýtvání, protože window.location má úplně stejné vlastnosti, takže pro to ani nemusíte vytvářet kotevní prvek.

Ve všech těchto příkladech stále musíte analyzovat řetězec dotazu, ale alespoň jste jej vytáhli z adresy URL.

UrlParsing.com/Conclusion#Paragraph

Vím, že je to kratší než moje obvyklé příspěvky, ale myslím, že jste se stále dozvěděli něco velmi cenného, ​​pokud jste o tom ještě neslyšeli někde jinde. Rozhodně bych si přál, abych o tom věděl před chvílí, když jsem ve skutečnosti dělal projekt, kde jsem potřeboval analyzovat URL. Nezapomeňte rozšířit techniku ​​analýzy mezi všechny své přátele programování v JavaScriptu a níže zanechte své komentáře. Šťastné kódování!

UPRAVIT:

Našel jsem příspěvek, který uvádí, že to nefunguje v IE6, protože href vlastnost není analyzována do úplné adresy URL, pokud není analyzována analyzátorem HTML. Existuje jednoduché řešení, které nutí analyzátor HTML, aby to přešel:

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