การเข้ารหัส URL

คำแนะนำที่เกี่ยวข้อง

การเข้ารหัส URL คืออะไร?

กรณีการใช้งาน

• ดีบักพารามิเตอร์ API: เปรียบเทียบผลลัพธ์ของ encodeURIComponent และ encodeURI เพื่อแก้ไขปัญหาลายเซ็นอินเทอร์เฟซไม่ตรงกัน
• ถอดรหัสล็อก: ถอดรหัสเนื้อหาที่เข้ารหัส URL ในล็อกแบบแบตช์เพื่อกู้คืนข้อความที่อ่านได้
• สร้าง URL: โหมด Query Only รักษาชื่อคีย์และเข้ารหัสเฉพาะค่า หลีกเลี่ยงข้อผิดพลาดรูปแบบเมื่อเชื่อมต่อสตริงด้วยตนเอง
• พัฒนาฟรอนต์เอนด์: การเน้นช่วยให้เข้าใจว่าอักขระใดถูกเอสเคป มีประโยชน์สำหรับดีบักการเปลี่ยนเส้นทางหน้า
• ย้ายข้อมูล: ประมวลผลข้อมูลที่เข้ารหัส URL ที่ส่งออกจากระบบเก่าแบบแบตช์เพื่อแปลงเป็นรูปแบบใหม่

วิธีการใช้งาน

1. ป้อนหรือวาง URL หรือข้อความที่ต้องการเข้ารหัส/ถอดรหัส
2. เลือกทิศทางการเข้ารหัส (เข้ารหัส/ถอดรหัส) และโหมด (Component / URI / full / RFC 3986)
3. เปิดโหมดแบตช์สำหรับข้อมูลหลายบรรทัดหรือ Query Only สำหรับเข้ารหัสเฉพาะค่าพารามิเตอร์
4. ตรวจสอบผลลัพธ์ที่เน้นและคัดลอกสตริงที่เข้ารหัสเพื่อใช้ในการเรียก API หรือสร้าง URL

คุณสมบัติ

• 4 โหมดการเข้ารหัส: สลับระหว่าง encodeURIComponent / encodeURI / full / RFC 3986 ด้วยคลิกเดียว เปรียบเทียบความแตกต่างของผลลัพธ์แบบเรียลไทม์
• การเน้นการเข้ารหัส: เน้นอักขระ %XX ที่ถูกเอสเคปแบบเรียลไทม์ การทำเครื่องหมายสีอำพันทำให้ผลลัพธ์การเข้ารหัสเห็นได้ทันที
• โหมดแบตช์: รองรับการเข้ารหัส/ถอดรหัสแบตช์หลายบรรทัด แต่ละบรรทัดถูกประมวลผลอย่างอิสระ เหมาะสำหรับล็อกหรือข้อมูลจำนวนมาก
• โหมด Query Only: เข้ารหัสเฉพาะส่วนค่าพารามิเตอร์ของ URL (หลังเครื่องหมายเท่ากับ) ทำให้ชื่อคีย์ อักขระ และโครงสร้างเส้นทางไม่เปลี่ยนแปลง
• ดีบาวน์แบบเรียลไทม์: เข้ารหัส/ถอดรหัสอัตโนมัติภายใน 300 มิลลิวินาที ไม่ต้องคลิกปุ่ม ผลลัพธ์ปรากฏขณะพิมพ์
• นับอักขระ: แสดงจำนวนอักขระที่ป้อนแบบเรียลไทม์ มีประโยชน์สำหรับตรวจสอบขีดจำกัดความยาวพารามิเตอร์ API

ตัวอย่างโค้ด

// encodeURIComponent: เข้ารหัสค่าพารามิเตอร์แต่ละค่า (ใช้บ่อยที่สุด)
const param = encodeURIComponent('张三&李四');
console.log(param); // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

// encodeURI: เข้ารหัส URL เต็ม (รักษาอักขระโครงสร้าง :/?#&=)
const url = encodeURI('https://example.com/search?q=สวัสดี ชาวโลก');
console.log(url);

// ถอดรหัส
const decoded = decodeURIComponent(param);
console.log(decoded); // 张三&李四

// เข้ากันได้กับ RFC 3986 (~ ไม่เข้ารหัส)
function rfc3986Encode(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

// API URLSearchParams (วิธีสมัยใหม่ เข้ารหัสอัตโนมัติ)
const params = new URLSearchParams({ name: '张三', city: '北京' });
console.log(params.toString());
// name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

from urllib.parse import quote, unquote, urlencode, quote_plus

# quote: คล้ายกับ encodeURIComponent
encoded = quote('张三&李四')
print(encoded)  # %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

# โหมด RFC 3986 (~ ค่าเริ่มต้นไม่เข้ารหัส)
print(quote('hello~world'))  # hello~world

# quote_plus: ช่องว่างเข้ารหัสเป็น + (รูปแบบฟอร์ม)
print(quote_plus('hello world'))  # hello+world

# ถอดรหัส
print(unquote(encoded))  # 张三&李四

# urlencode: สร้าง query string
params = urlencode({'name': '张三', 'city': '北京'})
print(params)
# name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.net.URI;
import java.nio.charset.StandardCharsets;

public class URLEncodeExample {
    public static void main(String[] args) throws Exception {
        // เข้ารหัส URL (URLEncoder - รูปแบบฟอร์ม ช่องว่างเป็น +)
        String encoded = URLEncoder.encode("张三&李四", "UTF-8");
        System.out.println(encoded);
        // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

        // ถอดรหัส
        String decoded = URLDecoder.decode(encoded, "UTF-8");
        System.out.println(decoded); // 张三&李四

        // สร้าง URL เต็ม (คลาส URI จัดการการเข้ารหัสอัตโนมัติ)
        URI uri = new URI("https", "example.com", "/search", "q=สวัสดี", null);
        System.out.println(uri.toASCIIString());
    }
}

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

อภิธานศัพท์

เปอร์เซ็นต์-เอ็นโค้ดดิ้ง (Percent-encoding)

ชื่อทางการของการเข้ารหัส URL วิธีการเข้ารหัสที่แสดงอักขระด้วย % ตามด้วยตัวเลขฐานสิบหกสองหลัก ตัวอย่างเช่น ช่องว่างเป็น %20 อักขระจีน '中' เป็น %E4%B8%ADวิกิพีเดีย - Percent-encoding

encodeURIComponent

ฟังก์ชันในตัวของ JavaScript เข้ารหัสอักขระทั้งหมดยกเว้น A-Z a-z 0-9 - _ . ! ~ * ' ( ) ใช้บ่อยที่สุดสำหรับเข้ารหัสค่าพารามิเตอร์คิวรีแต่ละค่า

encodeURI

ฟังก์ชันในตัวของ JavaScript รักษาอักขระโครงสร้าง URL (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) และเข้ารหัสเฉพาะอักขระที่จำเป็นต้องเข้ารหัสจริงๆ ใช้สำหรับเข้ารหัส URL เต็ม

RFC 3986

มาตรฐาน IETF ล่าสุดสำหรับไวยากรณ์ทั่วไปของ URI (2005) กำหนดกฎการเข้ารหัส URL และจำแนกทิลดา ~ เป็นอักขระที่ไม่สงวน (ไม่จำเป็นต้องเข้ารหัส) แทนที่ RFC 2396 และ RFC 1738 เก่าRFC 3986

อักขระสงวน (Reserved Characters)

อักขระที่มีความหมายพิเศษใน URL เช่น : / ? # [ ] @ ! $ & ' ( ) * + , ; = อักขระเหล่านี้ต้องถูกเข้ารหัสเมื่อใช้เป็นข้อมูล แต่ไม่ใช่ในตำแหน่งโครงสร้าง

อักขระที่ไม่สงวน (Unreserved Characters)

อักขระปลอดภัยที่สามารถใช้ในตำแหน่งใดๆ ของ URL โดยไม่ต้องเข้ารหัส รวมถึง A-Z, a-z, 0-9, -, _, ., ~ (ตาม RFC 3986)

Query String

ส่วนของ URL หลังเครื่องหมาย ? ประกอบด้วยคู่ key=value ที่คั่นด้วย & ตัวอย่างเช่น ใน ?name=张三&age=20 name=张三 และ age=20 เป็นพารามิเตอร์สองตัว

URLSearchParams

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

application/x-www-form-urlencoded

รูปแบบการส่งเริ่มต้นสำหรับฟอร์ม HTML ซึ่งช่องว่างถูกเข้ารหัสเป็น + แทน %20 ซึ่งแตกต่างจาก encodeURIComponent เล็กน้อย เฟรมเวิร์กเซิร์ฟเวอร์มักจะจัดการทั้งสองรูปแบบโดยอัตโนมัติ

การเข้ารหัส UTF-8

วิธีการเข้ารหัสอักขระมาตรฐานสำหรับเว็บ ในการเข้ารหัส URL อักขระที่ไม่ใช่ ASCII (เช่น จีน อีโมจิ) จะถูกแปลงเป็นลำดับไบต์ UTF-8 ก่อน จากนั้นแต่ละไบต์จะถูกเข้ารหัสในรูปแบบ %XX

เปรียบเทียบอักขระที่ถูกเอสเคปใน 4 โหมดการเข้ารหัส

อ้างอิงด่วนอักขระสงวน URL ที่พบบ่อย

Authoritative References

• ReferenceRFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• ReferenceRFC 1738 - Uniform Resource Locators (URL)
• ReferenceMDN Web Docs - encodeURIComponent()
• ReferenceMDN Web Docs - encodeURI()
• Referenceวิกิพีเดีย - Percent-encoding