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

View more Tutorials:

1- Javascript URL Encoding

В статье про  "HTML URL Encoding" я объяснил почему вам нужно кодировать (encode) URL, и таблицу символов и их кодированные значения.
В данной статье я покажу вам как кодировать (encode), и декодировать (decode) URL с Javascript.
Начнем с вопроса  "Как кодировать (encode) URL с Javascript?".
На самом деле это зависит от того, что вы хотите сделать. Javascript предоставляет вам 2 функции это encodeURI() и  encodeURIComponent(). Разница между 2-мя этими функциями это какие символы будут ими кодированы.
  • Функция encodeURI() кодирует все символы за исключением [email protected]#$&*()=:/,;?+
  • Функция 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="[email protected]"/>

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

    <input type="text" id="my-output"  style="width:100%;" disabled/>
</body>
</html>
Пример использования функции  decodeURIComponent():
decodeURIComponent-example.js
var searchText = "[email protected]";

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

console.log(encodedSearchText);

// ==> [email protected]
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>

View more Tutorials: