เครื่องมือเข้ารหัสและถอดรหัส URL

อักขระไหนบ้างที่ต้องเข้ารหัส

อักขระเหล่านี้มีความหมายเชิงโครงสร้างใน URL ถ้าปล่อยไว้ในค่าโดยไม่เข้ารหัส มันจะตัดค่านั้นจบก่อนกำหนดและเปลี่ยนความหมายของ URL ทั้งอัน

ตัวอักษร ตัวเลข และ - _ . ! ~ * ' ( ) ไม่ถูกเข้ารหัส เพราะไม่มีความหมายพิเศษ การ escape มันมีแต่ทำให้ URL อ่านยากขึ้นเปล่า ๆ

เลือกโหมด Component หรือ Full URL

สองโหมดต่างกันแค่เรื่องเดียว คืออักขระข้างบนจะถูก escape หรือคงไว้ การเลือกผิดคือสาเหตุที่ทำให้ลิงก์พังบ่อยที่สุด

โหมด Component ใช้กับค่าเดี่ยวที่กำลังจะเอาไปใส่ใน URL เช่น คำค้นหา ชื่อไฟล์ หรือปลายทางที่จะ redirect ไป

hello world & more   →   hello%20world%20%26%20more

โหมด Full URL ใช้กับสิ่งที่เป็น URL อยู่แล้ว มันจะคงโครงสร้างไว้ และ escape เฉพาะส่วนที่ไม่ปลอดภัย

https://x.com/a b?q=1   →   https://x.com/a%20b?q=1

ถ้าเอา URL อันเดียวกันนี้ไปผ่านโหมด Component จะได้สตริงที่ไม่ใช่ URL อีกต่อไป

https%3A%2F%2Fx.com%2Fa%20b%3Fq%3D1

ผลลัพธ์นั้นถูกต้อง และเป็นสิ่งที่ต้องการพอดีเมื่อ URL นั้นเป็นค่าของพารามิเตอร์เสียเอง อย่างในกรณี ?redirect= แต่ผิดในทุกกรณีอื่น

คำถามที่พบบ่อย

สองโหมดต่างกันอย่างไร

โหมด Component จะ escape อักขระคั่น / ? : @ & = + $ # ผลลัพธ์จึงเอาไปใส่เป็นค่าเดี่ยวได้อย่างปลอดภัย ส่วนโหมด Full URL จะคงอักขระเหล่านั้นไว้ เพราะใน URL มันทำหน้าที่กำหนดโครงสร้าง ถ้าเอา URL ทั้งอันไปผ่านโหมด Component สิ่งที่ได้ออกมาจะไม่ใช่ URL อีกต่อไป ซึ่งเป็นจุดที่คนพลาดบ่อยที่สุด

ทำไมบางครั้งการถอดรหัสถึงขึ้น error

decodeURIComponent จะ error เมื่อเจอ escape ที่ไม่สมบูรณ์ อย่างเช่น %E0%A4%A เครื่องมือจะรับ error นั้นไว้แล้วแจ้งให้คุณรู้ว่าข้อมูลที่วางมาขาดไป

คีย์ที่ซ้ำกันใน query string หายไหม

ไม่หาย ?tag=a&tag=b มีความหมายของมัน ถ้าเก็บพารามิเตอร์เป็น object หรือ Map จะมีตัวหนึ่งหายไปเงียบ ๆ ตารางนี้เก็บครบทุกคู่และคงลำดับเดิม

ทำไมช่องว่างถูกแปลงเป็น %20 ไม่ใช่ +

encodeURIComponent ไม่สร้าง + การแทนที่แบบนั้นมาจากการเข้ารหัสฟอร์ม ส่วนการอ่าน query string เป็นคนละเรื่อง ตรงนั้นเครื่องมือจะตีความ + เป็นช่องว่างให้