Руководство Javascript URL Encoding

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

1. Javascript URL Encoding

В статье про "HTML URL Encoding" я объяснил почему вам нужно кодировать (encode) URL, и таблицу символов и их кодированные значения.

Руководство HTML URL Encoding

В данной статье я покажу вам как кодировать (encode), и декодировать (decode) URL с Javascript.

Начнем с вопроса "Как кодировать (encode) URL с Javascript?".

На самом деле это зависит от того, что вы хотите сделать. Javascript предоставляет вам 2 функции это encodeURI() и encodeURIComponent(). Разница между 2-мя этими функциями это какие символы будут ими кодированы.

Функция encodeURI() кодирует все символы за исключением ~!@#$&*()=:/,;?+
Функция encodeURIComponent() кодирует все символы за исключением -_.!~*'()

Поэтому фукнция encodeURI() подходит, если вы хотите кодировать весь URL, потому что такие части как ( http:// ) не будут кодированы. Используйте функцию encodeURIComponent(), если вы хотите кодировать значение параметра.

Если вы используете функцию encodeURIComponent() для кодирования всего URL вы получите нежелаемый результат.

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)

Чтобы декодировать (decode) Javascript предоставляет вам 2 функции decodeURI() и decodeURIComponent().Случаи их использования схожи с 2-мя функциями encodeURI() и encodeURLComponent().

2. encodeURI(), decodeURI()

encodeURI(uri)

Функция encodeURI(uri) возвращает строку (string), это результат кодирования (encode) параметра uri.

Функция encodeURI() кодирует (encode) все символы. за исключением символов ниже:

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

Функция encodeURI(uri) используется если вы хотите кодировать весь URL или часть 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>

Пример использования функции 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)

Функция encodeURIComponent(uri) возвращает строку (string), это результат кодирования (encode) параметра uri.

Функция encodeURIComponent() кодирует (encode) все символы, за исключением символов ниже:

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

Функция encodeURIComponent(uri) обычно используется для кодирования (encode) значения параметра 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>

Пример использования функции 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?

Обе функции encodeURI() и encodeURIComponent() не кодируют все символы. И Javascript так же не имеет другую функцию для этой поддержки, поэтому если вы хотите, вам нужно написать свою собственную функцию.

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>