Mã hoá và giải mã URL
Mã hoá và giải mã URL, và tách một URL ra theo từng tham số.
Việc mã hoá và giải mã diễn ra ngay trong trang này. Không có gì bạn dán vào được gửi đi đâu, kể cả những URL bạn phân tích.
Một URL chỉ được chứa một tập ký tự hạn chế, và trong số đó có vài ký tự mang ý nghĩa cấu trúc: dấu gạch chéo ngăn các đoạn đường dẫn, dấu hỏi mở phần truy vấn, dấu và ngăn các tham số. Mã hoá phần trăm là cách mọi thứ còn lại lọt được vào — dấu cách thành %20, chữ có dấu thành các mã tương ứng với những byte UTF-8 của nó.
Tìm hiểu thêm về Mã hoá và giải mã URL
Câu hỏi đưa phần lớn mọi người tới đây là nên dùng hàm mã hoá nào trong hai hàm, và thật lòng thì nhìn tên gọi không thể đoán ra. `encodeURIComponent` mã hoá cả những ký tự cấu trúc, nên đúng cho một giá trị đơn lẻ được nhét vào URL. `encodeURI` thì giữ chúng nguyên, nên đúng cho cả một URL chỉ cần dọn dẹp dấu cách và chữ có dấu. Ở đây có cả hai, đặt cạnh nhau, và khác biệt được nói rõ chứ không mặc định là bạn đã biết.
Dùng nhầm hàm là kiểu hỏng âm thầm. Mã hoá một từ khoá tìm kiếm bằng `encodeURI` thì dấu `&` bên trong vẫn còn nguyên, nên `q=Marks & Spencer` tới máy chủ thành tham số `q` với giá trị `Marks ` cộng thêm một tham số thứ hai vô nghĩa. Không có lỗi nào báo cả; chỉ là kết quả sai.
Còn một cái bẫy thứ hai khi giải mã. Biểu mẫu HTML mã hoá dấu cách thành `+`, trong khi phần còn lại của URL mã hoá nó thành `%20`. Hiểu `+` là dấu cách trong một đoạn đường dẫn thì bạn làm hỏng tên tệp; hiểu nó theo nghĩa đen trong chuỗi truy vấn thì tìm "hello world" lại ra "hello+world". Công cụ này hỏi bạn muốn kiểu nào chứ không tự đoán, vì đoán kiểu nào cũng sai một nửa số trường hợp.
Chế độ phân tích còn đi xa hơn, tách hẳn một URL ra: giao thức, tên miền, cổng, đường dẫn, từng tham số truy vấn thành một dòng riêng, và phần phân mảnh. Tham số trùng tên vẫn nằm riêng, tên miền quốc tế hiện cả dạng Punycode lẫn chữ bạn đọc được, và sửa dòng nào thì URL cũng được ghép lại với mọi phần mã hoá đúng chuẩn.
- Hai mức mã hoá đặt cạnh nhau, kèm giải thích khác biệt
- Giải mã với lựa chọn rõ ràng về việc + có nghĩa là dấu cách hay không
- Chế độ chặt tuỳ chọn, mã hoá thêm ! ' ( ) * đúng theo RFC 3986
- Báo mã phần trăm hỏng kèm vị trí thay vì lặng lẽ thất bại
- Tách URL thành giao thức, tên miền, đường dẫn, tham số và phân mảnh
- Giữ riêng các tham số trùng tên thay vì gộp chúng lại
- Hiện tên miền quốc tế ở cả dạng Punycode lẫn chữ đọc được
- Ghép lại URL ngay khi bạn sửa, mã hoá đúng từng phần
Cách sử dụng
- 1Dán văn bản hoặc URL của bạn vào ô nhập.
- 2Chọn chiều và mức: mã hoá hay giải mã, một thành phần hay cả URL.
- 3Nếu đang giải mã chuỗi truy vấn hay dữ liệu biểu mẫu, hãy bật "hiểu + là khoảng trắng".
- 4Sao chép kết quả, hoặc bấm nút đảo chiều để đưa nó ngược lại ô nhập.
- 5Muốn mổ xẻ một URL thì chuyển sang "Phân tích một URL" và sửa từng dòng tham số.
Câu hỏi thường gặp
encodeURI và encodeURIComponent khác nhau ở đâu?
`encodeURIComponent` mã hoá cả các ký tự dành riêng — hai chấm, gạch chéo, dấu hỏi, thăng, và, bằng — nên dùng cho một giá trị đơn lẻ mà bạn nhét vào URL. `encodeURI` giữ chúng nguyên, nên dùng cho cả một URL chỉ cần mã hoá dấu cách và chữ có dấu.
Dấu cách nên là %20 hay +?
Trong đường dẫn thì luôn là %20; trong chuỗi truy vấn thì cả hai đều được chấp nhận và máy chủ thường hiểu + là dấu cách, một di sản từ cách biểu mẫu HTML mã hoá. Không chắc thì cứ dùng %20, vì nó đúng ở mọi chỗ.
Vì sao URL đã mã hoá của tôi lại hỏng?
Thường là do mã hoá hai lần: dấu `%` vốn đã là một phần của mã lại bị mã hoá tiếp thành `%25`, nên `%20` biến thành `%2520`. Hãy giải mã một lần và xem có ra chữ đọc được không rồi mới mã hoá.
Các ký tự trong chế độ chặt để làm gì?
RFC 3986 xếp dấu chấm than, dấu nháy đơn, hai dấu ngoặc đơn và dấu sao vào nhóm dành riêng, nhưng hàm có sẵn của JavaScript theo chuẩn cũ hơn nên bỏ qua chúng. Hãy bật chế độ chặt khi bạn ký một yêu cầu OAuth hoặc làm việc với máy chủ từ chối các ký tự này.
Vì sao tên miền tiếng Việt của tôi hiện thành xn--gì đó?
Đó là Punycode, dạng ASCII mà DNS thực sự dùng cho tên miền quốc tế. Vẫn là một tên miền thôi; chế độ phân tích hiện cả hai dạng để bạn xác nhận việc chuyển đổi đúng như mình mong đợi.