Mã hóa và Giải mã URL
Mã hóa và giải mã chuỗi URL, xử lý an toàn các ký tự đặc biệt và văn bản không phải ASCII, phù hợp để truyền dữ liệu qua tham số truy vấn và đường dẫn.
Hướng dẫn sử dụng
Mã hóa URL chuyển đổi các ký tự đặc biệt hoặc ký tự không phải ASCII thành dạng %XX để truyền an toàn trong URL.
Sử dụng nút "Mã hóa" để chuyển đổi văn bản thành dạng an toàn cho URL (ví dụ: tham số truy vấn).
Sử dụng nút "Giải mã" để phục hồi chuỗi %XX về ký tự gốc.
Các tình huống phổ biến: xử lý tham số truy vấn, truyền dữ liệu biểu mẫu, gọi API, v.v.
Tính năng nổi bật
- Hai chế độ mã hóa: encodeURIComponent và encodeURI
- Xử lý linh hoạt khoảng trắng: mã hóa thành + hoặc %20
- Chuyển đổi thời gian thực và hiển thị thống kê độ dài đầu vào/đầu ra
- Nút sao chép/xóa và gửi ngược chiều giữa hai bảng
- Hỗ trợ quốc tế hóa đầy đủ và nhiều chủ đề DaisyUI
URL mã hóa là gì?
Mã hóa URL chuyển đổi các ký tự thành chuỗi mã hóa phần trăm %XX để truyền an toàn trong URL.
encodeURIComponent phù hợp cho từng thành phần đơn lẻ (như giá trị tham số truy vấn), sẽ mã hóa hầu hết các ký tự không phải chữ và số.
encodeURI phù hợp cho chuỗi URI đầy đủ, không mã hóa các ký tự giữ vai trò cấu trúc như ?, &, =, /.
Các trường hợp sử dụng phổ biến
- Xây dựng tham số truy vấn (từ khóa tìm kiếm, điều kiện lọc, v.v.)
- Mã hóa và truyền dữ liệu biểu mẫu GET/POST
- Mã hóa tham số yêu cầu API
- Đưa đầu vào người dùng một cách an toàn vào các đoạn đường dẫn URL
Câu hỏi thường gặp và bẫy cần tránh
- encodeURI vs encodeURIComponent: Dùng component cho tham số, dùng URI cho toàn bộ liên kết
- Khoảng trắng và +: application/x-www-form-urlencoded thường dùng + để đại diện cho khoảng trắng trong chuỗi truy vấn
- Tránh giải mã lặp lại: Giải mã nhiều lần sẽ làm hỏng dữ liệu
- Chuỗi phần trăm không hợp lệ sẽ gây lỗi; cần xử lý ngoại lệ một cách nhẹ nhàng
Cách thực hiện mã hóa/giải mã URL trong các ngôn ngữ lập trình
JavaScript
Mã hóa
// Component (recommended for query values)
const encoded = encodeURIComponent(text);
// If you need '+' for spaces in query strings
const encodedPlus = encoded.replace(/%20/g, '+');
// Full URI
const encodedUri = encodeURI(url);
Giải mã
// Treat '+' as space if needed
const input = plusAsSpace ? s.replace(/\+/g, ' ') : s;
// Component
const dec1 = decodeURIComponent(input);
// Fallback to decodeURI when input is a full URL
const dec2 = decodeURI(input);
PHP
Mã hóa
// Component (RFC 3986)
$encoded = rawurlencode($text);
// '+' for spaces (application/x-www-form-urlencoded)
$encodedPlus = str_replace('%20', '+', $encoded);
// Full query usage
$query = http_build_query(['q' => '你好 世界', 'type' => 'text']);
Giải mã
// Component
$decoded = rawurldecode($s);
// If input uses '+' for spaces
$decodedPlus = urldecode($s);
Python
Mã hóa
from urllib.parse import quote, quote_plus
# Component (RFC 3986)
enc = quote(text, safe='')
# '+' for spaces (application/x-www-form-urlencoded)
enc_plus = quote_plus(text)
Giải mã
from urllib.parse import unquote, unquote_plus
# Component
dec = unquote(s)
# Input with '+' for spaces
dec_plus = unquote_plus(s)
Go
Mã hóa
import (
"net/url"
)
// Query component
enc := url.QueryEscape(text) // spaces => +
// Path segment
// go1.8+
// url.PathEscape(text)
Giải mã
import (
"net/url"
)
// Query component
dec, _ := url.QueryUnescape(s)
// Path segment
// url.PathUnescape(s)
Rust
Mã hóa
// Cargo.toml: urlencoding = "^2"
use urlencoding::{encode, encode_binary};
let enc = encode(text); // component; spaces => %20
let enc_plus = enc.replace("%20", "+"); // if you need '+' for spaces
Giải mã
use urlencoding::decode;
// decode treats '+' as space
let dec = decode(s)?; // Result, _>
Java
Mã hóa
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
// Query param / form style (spaces => '+')
String enc = URLEncoder.encode(text, StandardCharsets.UTF_8);
// For RFC3986-like component encoding, replace '+' with %20 if needed
String encSpace = enc.replace("+", "%20");
Giải mã
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;
// URLDecoder treats '+' as space
String dec = URLDecoder.decode(s, StandardCharsets.UTF_8);