Bộ mã hóa / giải mã HTML entity

HTML entity là một chuỗi văn bản ngắn đại diện cho một ký tự trong mã nguồn HTML. Entity được dùng khi một ký tự sẽ gây mơ hồ hoặc không hợp lệ trong HTML thô — ví dụ, `<` và `>` phân định các thẻ HTML, vì vậy ký tự `<` theo nghĩa đen trong nội dung phải được viết là `&lt;` để trình duyệt không diễn giải nó là bắt đầu của thẻ.

HTML entity tồn tại ở hai dạng. Named entity dùng tên dễ đọc sau `&` và trước `;`, ví dụ `&amp;` cho dấu và, `&copy;` cho ký hiệu bản quyền, hoặc `&mdash;` cho dấu gạch ngang dài. Numeric entity dùng Unicode code point thập phân hoặc thập lục phân — `&#169;` và `&#xA9;` đều tạo ra ký hiệu bản quyền ©.

Năm ký tự HTML dành riêng mà mọi lập trình viên nên biết:

• `&amp;` – dấu và `&`
• `&lt;` – dấu nhỏ hơn `<`
• `&gt;` – dấu lớn hơn `>`
• `&quot;` – dấu ngoặc kép `"`
• `&#39;` – dấu nháy đơn / dấu phẩy trên `'`

Ngoài năm ký tự này, HTML định nghĩa named entity cho hàng trăm ký tự khác: chữ cái có dấu (`&eacute;` = é), khoảng trắng không ngắt (`&nbsp;`), dấu câu kiểu chữ (`&mdash;` = dấu gạch ngang dài, `&ldquo;` và `&rdquo;` = ngoặc kép kiểu chữ), ký hiệu tiền tệ (`&euro;` = ký hiệu euro), ký hiệu toán học và chữ cái Hy Lạp.

Mã hóa HTML entity mỗi khi bạn chèn văn bản thuần vào tài liệu HTML và văn bản đó có thể chứa ký tự HTML dành riêng. Các tình huống phổ biến nhất:

• Dán nội dung do người dùng tạo hoặc văn bản blog vào CMS hoặc template lưu trữ HTML thô.
• Nhúng ví dụ mã vào bài đăng blog hoặc trang tài liệu — đoạn như `<strong>in đậm</strong>` phải được mã hóa là `&lt;strong&gt;in đậm&lt;/strong&gt;` để trình duyệt hiển thị dưới dạng văn bản có thể nhìn thấy.
• Xây dựng payload JSON nhúng trong thẻ HTML `<script>` nơi `<`, `>` và `&` có thể phá vỡ cấu trúc HTML xung quanh.
• Lưu trữ giá trị thuộc tính có thể chứa dấu ngoặc kép, để tránh làm hỏng dấu phân cách `"..."` xung quanh.
• Mã hóa ký tự đặc biệt cho template email HTML.

Dùng chế độ cơ bản khi chỉ cần escape năm ký tự dành riêng. Dùng chế độ mở rộng cho khả năng tương thích HTML tối đa hoặc với hệ thống cũ chỉ hỗ trợ ASCII.

Giải mã HTML entity khi bạn nhận được văn bản đã được escape và cần đọc, xử lý hoặc hiển thị các ký tự gốc. Trong các cụm từ tìm kiếm, điều này thường được gọi là HTML decode, HTML unescape, hoặc chuyển đổi văn bản HTML đã mã hóa sang văn bản thường. Các tình huống phổ biến:

• Phản hồi API có trường chuỗi chứa văn bản HTML-escaped — ví dụ `Tom &amp; Jerry` trong khi bạn mong đợi `Tom & Jerry`. Trong trường hợp này cần chuyển HTML entity sang văn bản.
• Sửa nội dung CMS bị mã hóa hai lần tạo ra chuỗi như `&amp;lt;` thay vì `&lt;` hoặc `<`.
• Đọc các mục feed RSS hoặc Atom có nội dung văn bản thường là HTML-encoded.
• Kiểm tra dòng log có tham số truy vấn hoặc thông báo lỗi HTML-escaped.
• Sao chép văn bản hiển thị từ tệp nguồn HTML nơi nội dung được lưu dưới dạng entity.

Công cụ này giải mã cả named entity (`&amp;`, `&copy;`, `&mdash;`, `&nbsp;` và hàng trăm entity khác) lẫn numeric entity theo ký hiệu thập phân (`&#169;`) và thập lục phân (`&#xA9;`).

Bộ mã hóa này cung cấp hai mức độ chi tiết mã hóa.

Chế độ cơ bản chỉ mã hóa năm ký tự HTML dành riêng: `&` thành `&amp;`, `<` thành `&lt;`, `>` thành `&gt;`, `"` thành `&quot;`, `'` thành `&#39;`. Tất cả ký tự khác — chữ cái có dấu như `é` và `ü`, ký hiệu như `©` và `—`, emoji như 😀 — được chuyển qua không thay đổi. Dùng chế độ cơ bản khi môi trường đích hỗ trợ Unicode gốc.

Chế độ mở rộng mã hóa năm ký tự dành riêng tương tự và ngoài ra còn chuyển đổi mọi ký tự không phải ASCII thành numeric entity thập phân. Ví dụ `é` thành `&#233;`, `©` thành `&#169;`, `—` thành `&#8212;`, và 😀 thành `&#128512;`. Dùng chế độ mở rộng khi cần output ASCII thuần hoặc cho các hệ thống cũ.

Các lập trình viên đôi khi tìm kiếm tác vụ này với các thuật ngữ htmlDecode, htmlEncode, HTML escape, HTML unescape, mã hóa HTML hoặc giải mã HTML. Cách gọi khác nhau nhưng mục đích giống nhau: chuyển đổi an toàn giữa ký tự có thể đọc và biểu diễn HTML entity của chúng.

Ví dụ chuyển đổi hai chiều ở chế độ cơ bản:

• Đầu vào: `Café & © 😀`
• Đã mã hóa (cơ bản): `Café &amp; © 😀`
• Đã giải mã: `Café & © 😀`

Ví dụ chuyển đổi hai chiều ở chế độ mở rộng:

• Đầu vào: `Café & © 😀`
• Đã mã hóa (mở rộng): `Caf&#233; &amp; &#169; &#128512;`
• Đã giải mã: `Café & © 😀`

Mã hóa HTML entity và mã hóa URL là hai cơ chế hoàn toàn khác nhau với mục đích và đầu ra khác nhau — mặc dù cả hai đều chuyển đổi ký tự đặc biệt sang dạng biểu diễn thay thế.

Mã hóa HTML entity dành cho tài liệu HTML. Nó thay thế các ký tự có ý nghĩa đặc biệt trong HTML markup bằng các chuỗi entity mà trình phân tích HTML xử lý như nội dung văn bản. Kết quả vẫn là văn bản có thể đọc được — `&amp;` hiển thị là `&` trên trình duyệt.

Mã hóa URL (mã hóa phần trăm) dành cho URL. Nó thay thế các ký tự không an toàn hoặc dành riêng trong URL bằng các chuỗi byte được mã hóa theo phần trăm. Dấu cách thành `%20`, dấu và thành `%26`, dấu nhỏ hơn thành `%3C`.

So sánh các ký tự giống nhau trong cả hai hệ thống:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

Nếu bạn dán văn bản HTML-encoded vào bộ mã hóa URL, nó sẽ mã hóa chính các ký tự entity (`&`, `;`, `#`), điều này hầu như không bao giờ mong muốn. Dùng trang này để giải mã HTML entity, mã hóa HTML entity và chuyển đổi văn bản HTML-encoded sang văn bản có thể đọc được.

Mã hóa HTML entity (công cụ này) chuyển đổi ký tự sang tương đương HTML entity và đảo ngược quá trình đó. Nó không thêm, xóa hoặc tái cấu trúc bất kỳ phần tử HTML nào. Cấu trúc tài liệu được giữ nguyên; chỉ biểu diễn của ký tự đặc biệt thay đổi.

Làm sạch HTML là thao tác khác xóa hoặc viết lại HTML markup — xóa các thẻ không mong muốn, chuẩn hóa thuộc tính, hoặc xử lý nội dung có thể gây hại. Hàm làm sạch có thể chuyển `<b onclick="...">in đậm</b>` thành `<b>in đậm</b>` hoặc chỉ là `in đậm`.

Công cụ này không làm sạch HTML. Nếu bạn dán HTML thô vào bộ mã hóa, nó sẽ mã hóa các dấu ngoặc nhọn và ký tự dành riêng khác trong markup, biến `<p>Xin chào</p>` thành `&lt;p&gt;Xin chào&lt;/p&gt;`. Nó không kiểm tra, xóa hoặc tái cấu trúc bất kỳ phần tử nào.

Công cụ này cũng không phải là trình làm sạch văn bản. Nó không xóa khoảng trắng thừa, không bỏ dấu phụ, và không chuẩn hóa dấu xuống dòng. Nhiệm vụ duy nhất của nó là mã hóa và giải mã HTML entity.