ต้นฉบับ: Hello World!
Encoded:  Hello%20World%21

ต้นฉบับ: [email protected]
Encoded:  user%40example.com

ตัวอักษร:    A-Z, a-z
ตัวเลข:    0-9
ไม่มีสงวน: - . _ ~ (ไม่ต้องเข้ารหัส)

✅ https://example.com/my-article
✅ https://example.com/blog_2025
✅ https://example.com/item.php

ตัวอักษร    เข้ารหัสเป็น   กรณีการใช้
  Space      %20       ระหว่างคำ
  !          %21       จุดสิ้นสุดข้อความ
  "          %22       เครื่องหมายอัญประลัษณ์
  #          %23       การอ้างอิงส่วนหัว
  &          %26       ตัวคั่นพารามิเตอร์
  @          %40       สัญลักษณ์ที่
  =          %3D       ค่าพารามิเตอร์
  ?          %3F       จุดสนใจ
  /          %2F       เครื่องหมายทับ
  :          %3A       โคลอน

https://example.com/search?q=best%20online%20tools

https://example.com/user/user%40example.com

https://example.com/downloads/my%20document.pdf

https://shop.com?price=%24100&discount=50%25

// URL Encoding (สำหรับ URL)
"hello world" → "hello%20world"

// HTML Entity Encoding (สำหรับ HTML)
"hello world" → "hello world" (ไม่มีการเปลี่ยน)
"<script>" → "&lt;script&gt;"

// JavaScript Encoding (สำหรับ JavaScript)
"alert('hi')" → "alert(\'hi\')" (หนีเครื่องหมายคำพูด)

[email protected] 2025

user%40example.com%202025

// เข้ารหัส
encodeURIComponent('hello world!');
// ผลลัพธ์: "hello%20world%21"

// ถอดรหัส
decodeURIComponent('hello%20world%21');
// ผลลัพธ์: "hello world!"

from urllib.parse import quote, unquote

# เข้ารหัส
quote("hello world!")
# ผลลัพธ์: "hello%20world%21"

# ถอดรหัส
unquote("hello%20world%21")
# ผลลัพธ์: "hello world!"

const searchTerm = 'best tools 2025';
const encodedTerm = encodeURIComponent(searchTerm);
const url = `https://google.com/search?q=${encodedTerm}`;
// ผลลัพธ์: https://google.com/search?q=best%20tools%202025

<!-- ผิด: เว้นวรรคทำให้ลิงก์ขาด -->
<a href="/downloads/my document.pdf">Download</a>

<!-- ถูก: ชื่อไฟล์ที่เข้ารหัสใช้ได้ -->
<a href="/downloads/my%20document.pdf">Download</a>

const params = {
  email: '[email protected]',
  message: 'Hello, World!',
  amount: '$100',
};

const urlParams = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => {
  urlParams.append(key, value);
});

const apiUrl = `https://api.example.com?${urlParams}`;
// เบราว์เซอร์เข้ารหัส URL ค่าโดยอัตโนมัติ

// ผิด - เข้ารหัสสองครั้ง
const encoded = encodeURIComponent(encodeURIComponent('hello world'));
// ผลลัพธ์: "hello%2520world" (% เองถูกเข้ารหัส!)

// ถูก - เข้ารหัสเพียงครั้งเดียว
const encoded = encodeURIComponent('hello world');
// ผลลัพธ์: "hello%20world"

// ผิด - อักขระพิเศษทำให้ query ขาด
const url = `https://[email protected]&name=John Doe`;
// ปัญหา: & และเว้นวรรค

// ถูก - เข้ารหัสค่าพารามิเตอร์
const email = encodeURIComponent('[email protected]');
const name = encodeURIComponent('John Doe');
const url = `https://api.example.com?email=${email}&name=${name}`;

// ผิด - เข้ารหัส slashes และ colons!
encodeURIComponent('https://example.com/path');
// ผลลัพธ์: "https%3A%2F%2Fexample.com%2Fpath"

// ถูก - เข้ารหัสเฉพาะส่วนต่างๆ
const path = 'search results';
const encoded = encodeURIComponent(path);
const url = `https://example.com/search/${encoded}`;

https://user:[email protected]:8080/path/to/page?name=value#section
\_____/ \___/ \___/\__________/\__/ \_____________/ \___________/ \_____/
protocol user pass   domain    port     path            query        fragment