Mag-parse ng URL _

Paano gumagana ang URL parsing

Tumatakbo ang parser sa WHATWG URL standard, ang parehong algorithm na ginagamit ng browser para sa anumang href. Ipinasa namin ang string sa native na URL constructor at binabasa muli ang bawat component bilang isang property.

1. I-validate ang input. Ang isang walang laman na string ay nagpapakita ng empty-input notice. Kung hindi, ipinapasa namin ang teksto sa new URL(text); ang isang TypeError ay nangangahulugang hindi isang wastong absolute URL ang string.
2. Basahin ang mga structural component. Binabasa namin ang protocol, username, password, host, hostname, port, pathname, search, hash, at origin mula sa URL object. Ang bawat isa ay nasa sariling row para makopya mo ito nang hiwalay.
3. Lakarin ang query string. Inii-iterate namin ang url.searchParams.entries() at nagre-render ng isang table row bawat key. Ang raw value ay nasa tabi ng decodeURIComponent(value) para ang mga percent-encoded na payload (espasyo, plus sign, Unicode) ay mabasa sa simpleng Ingles.
4. Buuin muli sa kahilingan. I-edit ang anumang cell, tanggalin ang isang row, o magdagdag ng bagong parameter, pagkatapos ay mag-click ng Buuin ang URL. Binubuo muli ng tool ang isang sariwang URL object mula sa iyong mga edit at isinusulat ang resulta pabalik sa input box.
5. Live mode. I-toggle ang live mode at ang bawat keystroke ay muli-parses ang URL gamit ang 150 ms debounce. Kapaki-pakinabang kapag nagpe-paste ka ng mga fragment mula sa isang log at gusto mong agad na feedback.

Bakit mag-parse ng URL sa iyong browser

• Walang lumalabas sa tab. Nagdadala ang mga URL ng mga token, session ID, OAuth state, at mga naka-sign na query parameter na hindi mo gustong hawakan ng isang third-party na serbisyo. Gumagamit ang parser na ito ng parehong URL algorithm na lokal na pinapatakbo ng iyong browser — walang upload, walang network call.
• Tumutugma sa nakikita ng iyong code. Ang Node.js, Deno, mga modernong browser, at Cloudflare Workers ay lahat nagpapadala ng WHATWG URL implementation. Ang pag-inspect ng isang URL dito ay nagbibigay sa iyo ng parehong component split na ibibigay sa iyo ng isang new URL(input) na tawag sa production.
• Nagbabasa ng mga query string tulad ng ginagawa ng mga tao. Ang mga raw at decoded na value ay magkatabi, kaya ang isang q=hello%20world na pares ay nagpapakita ng parehong wire bytes at ang nababasang hello world sa isang tingin. Hindi na kailangang mental na i-URL-decode.
• Round-trip na pag-edit. Mag-drop ng tracking parameter, ayusin ang typo sa path, baguhin ang port — at buuin muli ang URL. Ang output ay dumadaan muli sa URL constructor kaya ang anumang hindi wastong bagay ay lalabas bago mo ito kopyahin.

Mga karaniwang aplikasyon

Lumalabas ang URL parsing sa pang-araw-araw na developer, seguridad, at analytics na gawain tuwing ang isang URL ay higit pa sa isang simpleng link.

• Pag-debug ng mga API endpoint: kumpirmahin ang base URL, path, at mga query parameter bago magpadala ng curl o Postman request.
• Mga audit ng tracking parameter: ilista ang bawat UTM, gclid, fbclid, o campaign key sa isang landing-page URL at magpasya kung alin ang itatago.
• Pag-validate ng mga affiliate at partner link: mag-paste ng deeplink, kumpirmahin ang destination host at ang embedded na redirect target bago mag-publish.

Isang halimbawa

Mag-paste ng https://example.com/search?q=hello%20world&lang=en sa input. Ang protocol ay nagbabasa ng https:, ang hostname ay nagbabasa ng example.com, ang pathname ay nagbabasa ng /search, at ang search ay nagbabasa ng ?q=hello%20world&lang=en. Ang query table ay nagpapakita ng dalawang row: q na may raw value na hello%20world at decoded value na hello world, pagkatapos lang na may parehong raw at decoded value na en. Mag-click ng Tanggalin sa lang row, pagkatapos Buuin ang URL — ang input ay na-update sa https://example.com/search?q=hello%20world.

FAQ

Ano ang isang URL parser?

Ang isang URL parser ay kumukuha ng isang URL string at dino-decompose ito sa mga pinangalanang component: protocol (https), userinfo (username, password), host (hostname kasama ang opsyonal na port), path, query string, at fragment. Dino-decode din nito ang bawat query parameter para mabasa ang mga percent-encoded na value (tulad ng %20 para sa isang espasyo). Gumagamit ang parser dito ng WHATWG URL standard, ang parehong ginagamit ng iyong browser para mag-load ng page.

Ano ang pagkakaiba sa pagitan ng host at hostname?

Ang hostname ay ang domain lamang (o IP address) — para sa example.com:8080 ang hostname ay example.com. Ang host ay hostname kasama ang port kapag may hindi-default na port, kaya ang parehong URL ay may host na example.com:8080. Para sa mga URL sa mga default na port (443 para sa https, 80 para sa http) ang host at hostname ay magkapareho.

Awtomatiko bang nangyayari ang decoding?

Ang mga structural component (protocol, hostname, port, pathname) ay binabasa nang direkta mula sa URL object nang walang karagdagang decoding — ang URL constructor ay nag-normalize na ng mga ito. Ang mga query value ay ipinapakita nang dalawang beses: ang raw percent-encoded na string tulad ng pagkakita nito sa search, at ang decoded na value na ginawa ng decodeURIComponent. Sa gayon maaari mong kopyahin ang alinmang form na inaasahan ng iyong downstream na tool.

Maaari ko bang i-edit at buuin muli ang URL?

Oo. Ang bawat parts cell at bawat query-parameter cell ay nae-edit. Magdagdag o mag-alis ng mga query row gamit ang mga button na Dagdag at Tanggalin, pagkatapos mag-click ng Buuin ang URL mula sa mga bahagi. Pinatatakbo ng tool ang iyong mga edit pabalik sa URL constructor at isinusulat ang resulta sa input — kung ang mga edit ay gumagawa ng hindi wastong URL makakakuha ka ng parehong mensahe ng error na makukuha mo mula sa new URL() sa iyong sariling code.

Ang URL parsing ay isa sa mga maliit na trabaho na ginagawa ng bawat web developer bawat linggo. Ang paggawa nito sa browser, gamit ang parehong algorithm na ginagamit ng production code, ay nagpapanatiling mabilis ang trabaho at nasa iyong makina ang data.