URL Elemzése _

Hogyan működik az URL elemzés

Az elemző a WHATWG URL szabványon fut, ugyanazon az algoritmuson, amelyet a böngésző használ bármely href esetében. A karakterláncot a natív URL konstruktornak adjuk, és minden komponenst tulajdonságként olvasunk vissza.

1. Bemenet érvényesítése. Egy üres karakterlánc egy üres-bemenet figyelmeztetést jelenít meg. Ellenkező esetben átadjuk a szöveget a new URL(szöveg)-nek; egy TypeError azt jelenti, hogy a karakterlánc nem érvényes abszolút URL.
2. A strukturális komponensek beolvasása. Beolvassuk a protocol, username, password, host, hostname, port, pathname, search, hash és origin értékeket az URL objektumból. Mindegyik a saját sorában landol, így elkülönítve másolhatod.
3. A lekérdezési karakterlánc bejárása. Végigiterálunk a url.searchParams.entries()-n, és kulcsonként egy táblázatsort jelenítünk meg. A nyers érték a decodeURIComponent(érték) mellett ül, így a százalékosan kódolt adatok (szóközök, pluszjelek, Unicode) egyszerű nyelvezetben olvashatók.
4. Újraépítés igény szerint. Szerkessz bármely cellát, törölj egy sort, vagy adj hozzá egy új paramétert, majd kattints az URL Építése gombra. Az eszköz rekonstruál egy friss URL objektumot a szerkesztéseidből, és visszaírja az eredményt a bemeneti mezőbe.
5. Élő mód. Kapcsold be az élő módot, és minden billentyűleütés újraértelmezi az URL-t 150 ms-es szűréssel. Hasznos, amikor töredékeket illesztesz egy naplóból, és azonnali visszajelzést szeretnél.

Miért érdemes URL-t elemezni a böngésződben

• Semmi sem hagyja el a lapot. Az URL-ek tokeneket, munkamenet-azonosítókat, OAuth állapotot és aláírt lekérdezési paramétereket hordoznak, amelyeket nem szeretnél, hogy egy harmadik féltől származó szolgáltatás megtartson. Ez az elemző ugyanazt az URL algoritmust használja, amelyet a böngésződ már helyben futtat — nincs feltöltés, nincs hálózati hívás.
• Megegyezik azzal, amit a kódod lát. A Node.js, Deno, modern böngészők és Cloudflare Workers mind a WHATWG URL implementációt szállítják. Egy URL ellenőrzése itt ugyanazt a komponensfelosztást adja, mint egy new URL(input) hívás éles környezetben.
• A lekérdezési karakterláncokat úgy olvassa, ahogy az emberek. A nyers és dekódolt értékek egymás mellett ülnek, így egy q=hello%20world pár mind a vezetékes bájtokat, mind az olvasható hello world-öt egy pillantással megjeleníti. Nincs szükség fejben történő URL-dekódolásra.
• Oda-vissza szerkesztés. Dobj el egy követési paramétert, javíts egy elírást az útvonalban, változtass portot — és építsd újra az URL-t. A kimenet visszamegy az URL konstruktoron, így bármi érvénytelen felszínre kerül, mielőtt bemásolnád.

Gyakori alkalmazások

Az URL elemzés a mindennapi fejlesztői, biztonsági és elemzési munkában jelenik meg, amikor egy URL több, mint egy link.

• API végpontok hibakeresése: erősítsd meg az alap URL-t, útvonalat és lekérdezési paramétereket egy curl vagy Postman kérés elküldése előtt.
• Követési paraméter audit: sorold fel az összes UTM, gclid, fbclid vagy kampány kulcsot egy céloldali URL-en, és döntsd el, melyiket tartsd meg.
• Partner- és társult linkek érvényesítése: illessz be egy mélylinket, erősítsd meg a cél gazdagépet és a beágyazott átirányítási célt a közzététel előtt.

Egy kidolgozott példa

Illeszd be a https://example.com/search?q=hello%20world&lang=en URL-t a bemenetbe. A protokoll https:-ként, a gazdagépnév example.com-ként, az útvonal /search-ként, a keresés pedig ?q=hello%20world&lang=en-ként olvasható. A lekérdezési táblázat két sort mutat: q nyers értéke hello%20world és dekódolt értéke hello world, majd lang mind nyers, mind dekódolt értéke en. Kattints az Eltávolítás gombra a lang soron, majd az URL Építése gombra — a bemenet frissül a https://example.com/search?q=hello%20world URL-re.

FAQ

Mi az URL elemző?

Egy URL elemző egy URL karakterláncot vesz és nevesített komponensekre bontja: protokoll (https), felhasználói adatok (felhasználónév, jelszó), gazdagép (gazdagépnév plusz opcionális port), útvonal, lekérdezési karakterlánc és töredék. Emellett dekódolja minden lekérdezési paramétert, így a százalékosan kódolt értékek (mint a %20 a szóközhöz) olvashatók. Az itteni elemző a WHATWG URL szabványt használja, ugyanazt, amelyet a böngésződ használ egy oldal betöltéséhez.

Mi a különbség a gazdagép és a gazdagépnév között?

A gazdagépnév csak a tartomány (vagy IP cím) — a example.com:8080 esetében a gazdagépnév example.com. A gazdagép a gazdagépnév plusz a port, ha egy nem alapértelmezett port van jelen, így ugyanannak az URL-nek a gazdagépe example.com:8080. Az alapértelmezett portokkal rendelkező URL-eknél (443 a https-hez, 80 a http-hez) a gazdagép és a gazdagépnév azonos.

A dekódolás automatikusan történik?

A strukturális komponensek (protokoll, gazdagépnév, port, útvonal) közvetlenül az URL objektumból olvasódnak ki további dekódolás nélkül — az URL konstruktor már normalizálja őket. A lekérdezési értékek kétszer jelennek meg: a nyers százalékosan kódolt karakterlánc, ahogy a search-ben szerepel, és a dekódolt érték, amelyet a decodeURIComponent állít elő. Így másolhatod azt a formát, amelyet a további eszközöd vár.

Szerkeszthetem és újraépíthetem az URL-t?

Igen. Minden részcella és minden lekérdezési paraméter cella szerkeszthető. Adj hozzá vagy távolíts el lekérdezési sorokat a Hozzáadás és Eltávolítás gombokkal, majd kattints az URL Építése részekből gombra. Az eszköz visszafuttatja a szerkesztéseidet az URL konstruktoron, és az eredményt a bemenetbe írja — ha a szerkesztések érvénytelen URL-t eredményeznek, ugyanazt a hibaüzenetet kapod, mint a new URL()-től a saját kódodban.

Az URL elemzés az egyik olyan kis feladat, amelyet minden webfejlesztő hetente elvégez. A böngészőben, ugyanazzal az algoritmussal, amelyet az éles kód használ, a munka gyors marad és az adatok a gépeden.