Mã hóa URL

Đề xuất Liên quan

Trường hợp sử dụng

• Gỡ lỗi tham số API: so sánh đầu ra của encodeURIComponent và encodeURI để giải quyết vấn đề không khớp chữ ký giao diện
• Giải mã log: giải mã hàng loạt nội dung được mã hóa URL trong log để khôi phục văn bản có thể đọc được
• Tạo URL: chế độ Query Only giữ nguyên tên khóa và chỉ mã hóa giá trị, tránh lỗi định dạng khi nối chuỗi thủ công
• Phát triển frontend: đánh dấu giúp hiểu những ký tự nào được thoát, hữu ích để gỡ lỗi chuyển hướng trang
• Di chuyển dữ liệu: xử lý hàng loạt dữ liệu được mã hóa URL xuất từ hệ thống cũ để chuyển đổi sang định dạng mới

Tính năng

• Bốn chế độ mã hóa: chuyển đổi giữa encodeURIComponent / encodeURI / full / RFC 3986 bằng một cú nhấp, so sánh sự khác biệt đầu ra theo thời gian thực
• Đánh dấu mã hóa: làm nổi bật các ký tự %XX đã thoát theo thời gian thực, đánh dấu màu hổ phách giúp kết quả mã hóa hiển thị ngay lập tức
• Chế độ hàng loạt: hỗ trợ mã hóa/giải mã hàng loạt nhiều dòng, mỗi dòng được xử lý độc lập, lý tưởng cho log hoặc dữ liệu lớn
• Chế độ Query Only: chỉ mã hóa phần giá trị tham số của URL (sau dấu bằng), giữ nguyên tên khóa, ký tự và cấu trúc đường dẫn
• Debounce thời gian thực: tự động mã hóa/giải mã trong 300ms, không cần nhấp nút, kết quả hiển thị khi đang gõ
• Đếm ký tự: hiển thị số lượng ký tự đã nhập theo thời gian thực, hữu ích để kiểm tra giới hạn độ dài tham số API

Cách Sử dụng

1. Nhập hoặc dán URL hoặc văn bản cần mã hóa/giải mã
2. Chọn hướng mã hóa (Mã hóa/Giải mã) và chế độ (Component / URI / full / RFC 3986)
3. Bật chế độ hàng loạt cho dữ liệu nhiều dòng hoặc Query Only để chỉ mã hóa giá trị tham số
4. Kiểm tra kết quả được đánh dấu và sao chép chuỗi đã mã hóa để sử dụng trong lệnh gọi API hoặc tạo URL

Câu hỏi Thường gặp

Mã hóa URL là gì?

术语表

Mã hóa phần trăm (Percent-encoding)

Tên chính thức của mã hóa URL, một phương pháp mã hóa biểu diễn ký tự bằng % theo sau là hai chữ số thập lục phân. Ví dụ: khoảng trắng thành %20, ký tự Trung Quốc '中' thành %E4%B8%AD.Wikipedia - Percent-encoding

encodeURIComponent

Hàm tích hợp sẵn trong JavaScript, mã hóa tất cả các ký tự ngoại trừ A-Z a-z 0-9 - _ . ! ~ * ' ( ). Thường được sử dụng nhất để mã hóa từng giá trị tham số truy vấn.

encodeURI

Hàm tích hợp sẵn trong JavaScript, giữ nguyên các ký tự cấu trúc URL (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) và chỉ mã hóa các ký tự thực sự cần mã hóa. Được sử dụng để mã hóa URL đầy đủ.

RFC 3986

Tiêu chuẩn IETF mới nhất cho cú pháp chung URI (2005), định nghĩa các quy tắc mã hóa URL và phân loại dấu ngã ~ là ký tự không dành riêng (không cần mã hóa). Thay thế RFC 2396 và RFC 1738 cũ.RFC 3986

Ký tự dành riêng (Reserved Characters)

Các ký tự có ý nghĩa đặc biệt trong URL, như : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Các ký tự này phải được mã hóa khi được sử dụng làm dữ liệu, nhưng không ở vị trí cấu trúc của chúng.

Ký tự không dành riêng (Unreserved Characters)

Ký tự an toàn có thể được sử dụng ở bất kỳ vị trí nào trong URL mà không cần mã hóa, bao gồm A-Z, a-z, 0-9, -, _, ., ~ (theo RFC 3986).

Query String

Phần của URL sau dấu ?, bao gồm các cặp key=value được phân tách bằng &. Ví dụ: trong ?name=张三&age=20, name=张三 và age=20 là hai tham số.

URLSearchParams

API được cung cấp bởi các trình duyệt hiện đại để tạo và phân tích cú pháp query string URL một cách thuận tiện, với xử lý mã hóa và giải mã tự động. An toàn và đáng tin cậy hơn so với nối chuỗi thủ công.

application/x-www-form-urlencoded

Định dạng gửi mặc định cho form HTML, trong đó khoảng trắng được mã hóa thành + thay vì %20, hơi khác so với encodeURIComponent. Các framework máy chủ thường tự động xử lý cả hai định dạng.

Mã hóa UTF-8

Phương pháp mã hóa ký tự tiêu chuẩn cho web. Khi mã hóa URL, các ký tự không phải ASCII (như tiếng Trung, emoji) trước tiên được chuyển đổi thành chuỗi byte UTF-8, sau đó mỗi byte được mã hóa ở định dạng %XX.

So sánh các ký tự được thoát ở 4 chế độ mã hóa

Tra cứu nhanh các ký tự dành riêng phổ biến trong URL

Code Examples

// encodeURIComponent: mã hóa từng giá trị tham số (thường dùng nhất)
const param = encodeURIComponent('张三&李四');
console.log(param); // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

// encodeURI: mã hóa URL đầy đủ (giữ nguyên ký tự cấu trúc :/?#&=)
const url = encodeURI('https://example.com/search?q=xin chào thế giới');
console.log(url);

// Giải mã
const decoded = decodeURIComponent(param);
console.log(decoded); // 张三&李四

// Tương thích RFC 3986 (~ không mã hóa)
function rfc3986Encode(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

// API URLSearchParams (cách hiện đại, mã hóa tự động)
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: tương tự encodeURIComponent
encoded = quote('张三&李四')
print(encoded)  # %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

# Chế độ RFC 3986 (~ mặc định không mã hóa)
print(quote('hello~world'))  # hello~world

# quote_plus: khoảng trắng được mã hóa thành + (định dạng form)
print(quote_plus('hello world'))  # hello+world

# Giải mã
print(unquote(encoded))  # 张三&李四

# urlencode: tạo 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 {
        // Mã hóa URL (URLEncoder - định dạng form, khoảng trắng thành +)
        String encoded = URLEncoder.encode("张三&李四", "UTF-8");
        System.out.println(encoded);
        // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

        // Giải mã
        String decoded = URLDecoder.decode(encoded, "UTF-8");
        System.out.println(decoded); // 张三&李四

        // Tạo URL đầy đủ (lớp URI xử lý mã hóa tự động)
        URI uri = new URI("https", "example.com", "/search", "q=xin chào", null);
        System.out.println(uri.toASCIIString());
    }
}

Authoritative References

• ReferenceRFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• ReferenceRFC 1738 - Uniform Resource Locators (URL)
• ReferenceMDN Web Docs - encodeURIComponent()
• ReferenceMDN Web Docs - encodeURI()
• ReferenceWikipedia - Percent-encoding