Hàm encodeURI() và decodeURI() trong JavaScript

Mã hóa và Giải mã URI

Khi làm việc với URL, các ký tự đặc biệt (khoảng trắng, tiếng Việt, ký tự зарезервирован) cần được mã hóa để truyền an toàn qua mạng. JavaScript cung cấp hai hàm toàn cục:

• encodeURI(): Mã hóa toàn bộ URI. Không mã hóa các ký tự: A-Z a-z 0-9 ; , / ? : @ & = + $ # - _ . ! ~ * ' ( ).
• decodeURI(): Giải mã chuỗi đã được mã hóa bởi encodeURI().

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>encodeURI và decodeURI</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .encode, .decode { font-size: 18px; font-weight: 500; margin: 10px 0; }
        button { padding: 8px 16px; margin-right: 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>encodeURI() và decodeURI() trong JavaScript</h1>
    <button class="btn-encode">MÃ HÓA URI</button>
    <button class="btn-decode">GIẢI MÃ URI</button>
    <div class="encode"></div>
    <div class="decode"></div>
    <h3>Nhấn nút để mã hóa hoặc giải mã URL</h3>

    <script>
        const encodeEle = document.querySelector(".encode");
        const decodeEle = document.querySelector(".decode");
        const btnEncode = document.querySelector(".btn-encode");
        const btnDecode = document.querySelector(".btn-decode");

        // URL gốc có khoảng trắng và ký tự đặc biệt
        const url = "https://www.google.com/tìm kiếm/?img=hình ảnh.jpg&size=451px";
        let encodedUrl = '';

        btnEncode.addEventListener("click", () => {
            encodedUrl = encodeURI(url);
            encodeEle.innerHTML = "URL đã mã hóa = " + encodedUrl;
        });

        btnDecode.addEventListener("click", () => {
            if (encodedUrl) {
                decodeEle.innerHTML = "URL đã giải mã = " + decodeURI(encodedUrl);
            } else {
                decodeEle.innerHTML = "Vui lòng mã hóa URL trước!";
            }
        });
    </script>
</body>
</html>

Kết quả mong đợi

• Gốc: https://www.google.com/tìm kiếm/?img=hình ảnh.jpg&size=451px
• Sau encodeURI(): https://www.google.com/tim%20kiem/?img=hinh%20anh.jpg&size=451px (khoảng trắng thành %20, ký tự Unicode được mã hóa UTF-8)
• Sau decodeURI(): Quay lại URL gốc.

Bảng so sánh