การเข้ารหัส URL (หรือที่เรียกว่า Percent Encoding) เป็นกลไกในการแสดงอักขระพิเศษใน URL โดยใช้รูปแบบ %XX โดยที่ XX คือค่าเลขฐานสิบหก การเข้ารหัสนี้มีความสำคัญต่อการพัฒนาเว็บ การรวม API และการส่งข้อมูล เมื่อคุณต้องการรวมอักขระพิเศษเช่นช่องว่าง แอมเพอร์แซนด์ (&) เครื่องหมายคำถาม (?) หรืออักขระที่ไม่ใช่ ASCII ใน URL หรือพารามิเตอร์คิวรี การเข้ารหัสที่เหมาะสมจะช่วยให้มั่นใจว่าข้อมูลจะถูกส่งอย่างปลอดภัยโดยไม่ทำลายโครงสร้าง URL เครื่องมือนี้รองรับสองโหมดการเข้ารหัส: การเข้ารหัส URL แบบเต็ม (encodeURI) รักษาอักขระโครงสร้าง URL เช่น :, /, ?, &, = พร้อมกับเข้ารหัสอักขระพิเศษอื่นๆ—เหมาะสำหรับการเข้ารหัส URL ที่สมบูรณ์ การเข้ารหัสส่วนประกอบ (encodeURIComponent) เข้ารหัสอักขระพิเศษทั้งหมดรวมถึงอักขระโครงสร้าง URL—เหมาะสำหรับค่าพารามิเตอร์คิวรี ข้อมูลฟอร์ม และ payload ของคำขอ API การประมวลผลทั้งหมดเกิดขึ้นฝั่งไคลเอนต์ในเบราว์เซอร์ของคุณโดยไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์
How to Use
เลือกโหมดเข้ารหัสหรือถอดรหัสโดยใช้ปุ่มวิทยุที่ด้านบน สำหรับการเข้ารหัส: วางข้อความหรือ URL ของคุณลงในพื้นที่อินพุต และผลลัพธ์จะอัปเดตโดยอัตโนมัติด้วยผลลัพธ์ที่เข้ารหัส เลือกรูปแบบการเข้ารหัสช่องว่างของคุณ: %20 (มาตรฐาน สอดคล้องกับ RFC 3986) หรือ + (ใช้กันทั่วไปในสตริงคิวรีและข้อมูลฟอร์ม) สลับ 'เข้ารหัส URL แบบเต็ม' เพื่อสลับระหว่างการเข้ารหัส URL แบบเต็ม (รักษา :, /, ?, &, =) และการเข้ารหัสส่วนประกอบ (เข้ารหัสทุกอย่าง) สำหรับการถอดรหัส: วางข้อความ URL ที่เข้ารหัสแล้วและจะถอดรหัสโดยอัตโนมัติกลับเป็นรูปแบบที่อ่านได้ โดยจัดการทั้งการแสดง %20 และ + ของช่องว่าง คัดลอกผลลัพธ์ด้วยการคลิกเพียงครั้งเดียวโดยใช้ปุ่มคัดลอก หรือดาวน์โหลดผลลัพธ์เป็นไฟล์ข้อความ
Common Use Cases & Examples
**พารามิเตอร์คิวรี**: เข้ารหัส 'smart watch' เป็น 'smart%20watch' หรือ 'smart+watch' สำหรับสตริงคิวรี URL **คำขอ API**: สร้าง URL API เช่น 'https://api.example.com/search?q=อิเล็กทรอนิกส์%20%26%20แกดเจ็ต&ราคา=%3E100' ด้วยพารามิเตอร์ที่เข้ารหัสอย่างถูกต้อง **OAuth และลายเซ็น**: โฟลว์ OAuth จำนวนมากและอัลกอริทึมการลงนาม API ต้องการพารามิเตอร์ที่เข้ารหัส URL **ข้อมูลฟอร์ม**: เข้ารหัสการส่งฟอร์มสำหรับประเภทเนื้อหา application/x-www-form-urlencoded **ลิงก์เชิงลึก**: สร้างลิงก์เชิงลึกที่เข้ารหัสสำหรับแอปมือถือที่มีพารามิเตอร์ **การดีบัก**: ถอดรหัสการตอบกลับ API หรือแถบ URL ของเบราว์เซอร์เพื่อดูค่าพารามิเตอร์จริง **อักขระพิเศษ**: จัดการอักขระเช่น &, =, ?, #, /, @, :, <, >, \", ', %, + และช่องว่างใน URL
Limitations & Important Notes
เครื่องมือนี้ใช้การเข้ารหัส UTF-8 (มาตรฐานสำหรับเว็บสมัยใหม่) ไม่รองรับการเข้ารหัสที่ไม่ใช่ UTF-8 เครื่องมือจัดการการเข้ารหัส URL มาตรฐาน สำหรับรูปแบบการเข้ารหัสอื่นๆ (เช่น base64 หรือ HTML entities) ให้ใช้เครื่องมือที่เกี่ยวข้อง URL ที่ยาวมาก (>100KB) อาจทำให้เกิดปัญหาประสิทธิภาพในเบราว์เซอร์รุ่นเก่า ลำดับเปอร์เซ็นต์ที่มีรูปแบบไม่ถูกต้อง (เช่น %ZZ หรือลำดับที่ไม่สมบูรณ์) ในโหมดถอดรหัสจะทริกเกอร์ข้อความแสดงข้อผิดพลาด ตัวเลือก 'เข้ารหัส URL แบบเต็ม' ควรใช้เฉพาะสำหรับ URL ที่สมบูรณ์ที่เริ่มต้นด้วย http:// หรือ https://—สำหรับค่าพารามิเตอร์คิวรีเพียงอย่างเดียว ให้ใช้การเข้ารหัสส่วนประกอบ โปรดจำไว้ว่าการเข้ารหัส URL จะเพิ่มขนาดข้อความ: อักขระพิเศษแต่ละตัวกลายเป็น 3 อักขระ (%XX) ดังนั้น 'hello world' (11 อักขระ) จึงกลายเป็น 'hello%20world' (13 อักขระ)
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}