Hướng dẫn và ví dụ Javascript URL Encoding

Javascript URL Encoding
encodeURI(), decodeURI()
encodeURIComponent(), decodeURIComponent()
Encode all characters?

1. Javascript URL Encoding

Trong bài viết về "HTML URL Encoding" tôi có giải thích vì sao bạn cần phải mã hóa (encode) một URL, và bảng các ký tự và giá trị mã hóa của chúng.

Hướng dẫn và ví dụ HTML URL Encoding

Trong bài viết này tôi sẽ chỉ cho bạn làm thế nào để mã hóa (encode), và giải mã hóa (decode) một URL với Javascript.

Chúng ta bắt đầu với câu hỏi "Làm thế nào để mã hóa (encode) một URL với Javascript?".

Nó thực sự phụ thuộc vào cái mà bạn muốn làm. Javascript cung cấp cho bạn 2 hàm đó là encodeURI() và encodeURIComponent(). Sự khác biệt giữa 2 hàm này là các ký tự nào sẽ được chúng mã hóa.

Hàm encodeURI() mã hóa mọi ký tự ngoại trừ các ký tự ~!@#$&*()=:/,;?+
Hàm encodeURIComponent() mã hóa mọi ký tự ngoại trừ các ký tự -_.!~*'()

Do vậy hàm encodeURI() phù hợp nếu bạn muốn mã hóa toàn bộ một URL, vì phần như ( http:// ) sẽ không bị mã hóa. Sử dụng hàm encodeURIComponent() nếu bạn muốn mã hóa giá trị của một tham số.

Nếu bạn sử dụng hàm encodeURIComponent() để mã hóa toàn bộ một URL bạn sẽ nhận được một kết quả không mong muốn.

encodeURI("http://example.com/ hey!/")
// http://example.com/%20hey!/


encodeURIComponent("http://www.example.com/ hey!")
//  http%3A%2F%2Fexample.com%2F%20hey!%2F

var set1 = ";,/?:@&=+$#";  // Reserved Characters
var set2 = "-_.!~*'()";    // Unreserved Marks
var set3 = "ABC abc 123";  // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$#
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

Để giải mã hóa (decode) Javascript cung cấp cho bạn 2 hàm decodeURI() và decodeURIComponent(), tình huống sử dụng của chúng tương ứng giống với 2 hàm encodeURI() và encodeURLComponent().

2. encodeURI(), decodeURI()

encodeURI(uri)

Hàm encodeURI(uri) trả về một chuỗi (string), là kết quả của việc mã hóa (encode) tham số uri.

Hàm encodeURI() mã hóa (encode) tất cả các ký tự, ngoại trừ các ký tự dưới đây:

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

Hàm encodeURI(uri) được sử dụng nếu bạn muốn mã hóa toàn bộ một URL hoặc một phần URL.

encodeURI-example.html

<!DOCTYPE html>
<html>
<head>
    <title>encodeURI()</title>
    <meta charset="UTF-8">
    <style>input {margin: 10px 0px;}</style>

    <script>
        function doEncodeURI()  {
           var uri = document.getElementById('my-input').value;

           var encodedUri = encodeURI(uri);

           document.getElementById('my-output').value = encodedUri;
        }
    </script>
</head>
<body>
    <h3>encodeURI()</h3>

    Enter URL:
    <input type="text" id="my-input"  style="width:100%;"
        value="http://example.com/my search?value=tom and jerry&maxResults=10"/>

    <button onclick="doEncodeURI()">encodeURI()</button>

    <input type="text" id="my-output"  style="width:100%;" disabled/>
</body>
</html>

Ví dụ sử dụng hàm decodeURI():

decodeURI-example.js

var uri = "http://example.com/my search?value=tom and jerry&maxResults=10";

// ==> http://example.com/my%20search?value=tom%20and%20jerry&maxResults=10
var encodedUri = encodeURI(uri);

console.log(encodeUri);

// ==> http://example.com/my search?value=tom and jerry&maxResults=10
var uri2 = decodeURI(encodedUri);

console.log(uri2);

3. encodeURIComponent(), decodeURIComponent()

encodeURIComponent(uri)

Hàm encodeURIComponent(uri) trả về một chuỗi (string), là kết quả của việc mã hóa (encode) tham số uri.

Hàm encodeURIComponent() mã hóa (encode) tất cả các ký tự, ngoại trừ các ký tự dưới đây:

A-Z a-z 0-9 - _ . ! ~ * ' ( )

Hàm encodeURIComponent(uri) thường được sử dụng để mã hóa (encode) giá trị của một tham số của URL.

encodeURIComponent-example.html

<!DOCTYPE html>
<html>
<head>
    <title>encodeURIComponent()</title>
    <meta charset="UTF-8">
    <style>input {margin: 10px 0px;}</style>

    <script>
        function doEncodeURI()  {
           var searchText = document.getElementById('my-input').value;

           var encodedSearchText = encodeURIComponent(searchText);

            var url = "http://example.com/search?searchText=" + encodedSearchText;

           document.getElementById('my-output').value = url;
        }
    </script>
</head>
<body>
    <h3>encodeURIComponent()</h3>

    Enter Search Text:
    <input type="text" id="my-input"  style="width:100%;"
        value="someone@gmail.com"/>

    <button onclick="doEncodeURI()">Encode</button>

    <input type="text" id="my-output"  style="width:100%;" disabled/>
</body>
</html>

Ví dụ sử dụng hàm decodeURIComponent():

decodeURIComponent-example.js

var searchText = "someone@gmail.com";

// ==> someone%40gmail.com
var encodedSearchText = encodeURIComponent(searchText);

console.log(encodedSearchText);

// ==> someone@gmail.com
var text2 = decodeURIComponent(encodedSearchText);

console.log(text2);

4. Encode all characters?

Cả hai hàm encodeURI() và encodeURIComponent() đều không mã hóa tất cả các ký tự. Và Javascript cũng không có một hàm nào khác hỗ trợ việc này, vì vậy nếu muốn bạn phải viết một hàm của riêng mình.

encodeURIAll.js

function encodeURIAll(text) {
  return encodeURIComponent(text).replace(/[!'()~*]/g, (c) => {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

encodeURIAll-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Encode All Characters</title>
    <meta charset="UTF-8">
    <style>input {margin: 10px 0px;}</style>

    <script src="encodeURIAll.js"></script>

    <script>
        function doEncodeURI()  {
           var text = document.getElementById('my-input').value;

           var encodedUri = encodeURIAll(text);
           console.log(encodedUri)

           document.getElementById('my-output').value = encodedUri;
        }
    </script>
</head>
<body>
    <h3>Encode All Characters</h3>

    Enter Text:
    <input type="text" id="my-input"  style="width:100%;"
        value="abc_.!~*'()"/>

    <button onclick="doEncodeURI()">Encode</button>

    <input type="text" id="my-output"  style="width:100%;" disabled/>
</body>
</html>