แยกส่วนประกอบ URL _

URL parsing ทำงานอย่างไร

Parser ทำงานบนมาตรฐาน WHATWG URL ซึ่งเป็นอัลกอริทึมเดียวกันกับที่เบราว์เซอร์ใช้สำหรับ href ทุกรายการ เราส่งสตริงให้ URL constructor ดั้งเดิมและอ่านกลับแต่ละส่วนเป็น property

1. ตรวจสอบ input. สตริงว่างจะแสดงแจ้งเตือน empty-input มิฉะนั้นเราส่งข้อความไปยัง new URL(text) — TypeError หมายความว่าสตริงนั้นไม่ใช่ absolute URL ที่ถูกต้อง
2. อ่านส่วนประกอบโครงสร้าง. เราอ่าน protocol, username, password, host, hostname, port, pathname, search, hash และ origin จาก URL object แต่ละรายการจะแสดงในแถวของตัวเองเพื่อให้คัดลอกแยกกันได้
3. วน query string. เราวนลูป url.searchParams.entries() และแสดงหนึ่งแถวต่อ key โดย raw value อยู่ข้าง decodeURIComponent(value) เพื่อให้ payload ที่ percent-encode ไว้ (ช่องว่าง เครื่องหมาย + Unicode) อ่านออกได้ในภาษาธรรมดา
4. สร้าง URL ใหม่ตามต้องการ. แก้ไข cell ใดก็ได้ ลบแถว หรือเพิ่มพารามิเตอร์ใหม่ แล้วคลิก Build URL เครื่องมือจะสร้าง URL object ใหม่จากการแก้ไขของคุณและเขียนผลลัพธ์กลับไปยัง input box
5. โหมดสด. สลับโหมดสดและทุกการกดปุ่มจะ re-parse URL โดยมี debounce 150 ms มีประโยชน์เมื่อคุณวาง fragment จาก log และต้องการ feedback ทันที

ทำไมจึงแยกส่วน URL ในเบราว์เซอร์

• ไม่มีข้อมูลออกจากแท็บ. URL นำพา token, session ID, OAuth state และ signed query parameter ที่คุณไม่ต้องการให้บริการ third-party เก็บไว้ Parser นี้ใช้อัลกอริทึม URL เดียวกันกับที่เบราว์เซอร์ของคุณรันในเครื่อง — ไม่มีการอัปโหลด ไม่มีการเรียก network
• ตรงกับสิ่งที่โค้ดเห็น. Node.js, Deno, เบราว์เซอร์สมัยใหม่ และ Cloudflare Workers ล้วนใช้ WHATWG URL เหมือนกัน การตรวจสอบ URL ที่นี่ให้ผลแบ่งส่วนประกอบเหมือนกับที่การเรียก new URL(input) ใน production จะได้รับ
• อ่าน query string แบบมนุษย์. ค่า raw และ decoded วางเคียงกัน ดังนั้นคู่ q=hello%20world จะแสดงทั้ง wire bytes และ hello world ที่อ่านออกในมองเดียว ไม่ต้องถอดรหัส URL ในหัว
• แก้ไขและสร้างใหม่ได้. ลบ tracking parameter แก้ไข typo ใน path เปลี่ยน port — แล้วสร้าง URL ใหม่ output จะผ่าน URL constructor อีกครั้งเพื่อให้สิ่งที่ไม่ถูกต้องแสดงก่อนที่คุณจะคัดลอก

การใช้งานทั่วไป

URL parsing ปรากฏในงานประจำวันของนักพัฒนา, security และ analytics เมื่อ URL เป็นมากกว่าแค่ลิงก์

• Debug API endpoint: ยืนยัน base URL, path และ query parameter ก่อนส่งคำขอ curl หรือ Postman
• ตรวจสอบ tracking parameter: แสดงรายการ UTM, gclid, fbclid หรือ campaign key ทุกตัวบน URL หน้า landing และตัดสินใจว่าจะเก็บตัวใด
• ตรวจสอบ affiliate และ partner link: วาง deeplink ยืนยัน destination host และ redirect target ที่ฝังไว้ก่อนเผยแพร่

ตัวอย่างแบบ step-by-step

วาง https://example.com/search?q=hello%20world&lang=en ลงใน input โดย Protocol อ่านว่า https:, hostname อ่านว่า example.com, pathname อ่านว่า /search และ search อ่านว่า ?q=hello%20world&lang=en ตาราง query แสดงสองแถว: q ที่มี raw value hello%20world และ decoded value hello world จากนั้น lang ที่มีทั้ง raw และ decoded value เป็น en คลิก Remove บนแถว lang แล้ว Build URL — input จะอัปเดตเป็น https://example.com/search?q=hello%20world

FAQ

URL parser คืออะไร?

URL parser คือเครื่องมือที่รับสตริง URL และแยกย่อยออกเป็นส่วนประกอบที่มีชื่อ ได้แก่ protocol (https), userinfo (username, password), host (hostname บวก port ถ้ามี), path, query string และ fragment นอกจากนี้ยังถอดรหัสพารามิเตอร์การสืบค้นแต่ละตัวให้ค่าที่ encode เป็น percent (เช่น %20 สำหรับช่องว่าง) อ่านออกได้ Parser ที่นี่ใช้มาตรฐาน WHATWG URL เหมือนกับที่เบราว์เซอร์ใช้โหลดหน้าเว็บ

host กับ hostname ต่างกันอย่างไร?

Hostname คือแค่ domain (หรือ IP address) — สำหรับ example.com:8080 hostname คือ example.com ส่วน host คือ hostname บวก port เมื่อมี non-default port ดังนั้น URL เดียวกันมี host เป็น example.com:8080 สำหรับ URL บน default port (443 สำหรับ https, 80 สำหรับ http) host และ hostname จะเหมือนกัน

การถอดรหัสเกิดขึ้นอัตโนมัติหรือไม่?

ส่วนประกอบโครงสร้าง (protocol, hostname, port, pathname) อ่านโดยตรงจาก URL object โดยไม่ต้องถอดรหัสเพิ่ม — URL constructor normalize ให้แล้ว ค่า query จะแสดงสองครั้ง: สตริง percent-encoded ดิบตามที่ปรากฏใน search และค่าที่ถอดรหัสโดย decodeURIComponent เพื่อให้คุณคัดลอกรูปแบบที่ downstream tool ต้องการได้

แก้ไขและสร้าง URL ใหม่ได้ไหม?

ได้ ทุก parts cell และทุก query-parameter cell แก้ไขได้ เพิ่มหรือลบแถว query ด้วยปุ่ม Add และ Remove จากนั้นคลิก Build URL from parts เครื่องมือจะส่งการแก้ไขของคุณผ่าน URL constructor และเขียนผลลัพธ์กลับไปที่ input — ถ้าการแก้ไขสร้าง URL ที่ไม่ถูกต้อง คุณจะได้รับ error message เดียวกับที่ได้จาก new URL() ในโค้ดของคุณเอง

URL parsing เป็นงานเล็ก ๆ ที่นักพัฒนาเว็บทุกคนทำทุกสัปดาห์ การทำในเบราว์เซอร์ด้วยอัลกอริทึมเดียวกับที่โค้ด production ใช้ ทำให้งานรวดเร็วและข้อมูลอยู่บนเครื่องของคุณ