Le Tutoriel de Javascript URL Encoding

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

1. Javascript URL Encoding

Dans l'article de "HTML URL Encoding", j'ai expliqué pourquoi vous devez encoder (encode) une URL et un tableau de caractères et leurs valeurs encodées.

Le Tutoriel de HTML URL Encoding

Dans cet article, je vais vous montrer comment encoder (encode) et décoder (decode) une URL en utilisant Javascript.

Commençons par la question, "Comment faire pour encoder (encode) une URL avec Javascript?"

En fait, ça dépend de ce que vous voulez faire. Javascript vous fournit deux fonctions qui sont encododeURI() et encododeURIComponent(). La différence entre ces deux fonctions est celle des caractères qui seront encodés.

La fonction encodeURI() code tous les caractères à l'exception des caractères ~!@#$&*()=:/,;?+
La fonction encodeURIComponent() code tous les caractères à l'exception des caractères -_.!~*'()

Par conséquent, la fonction encoderURI() sera un bon choix si vous voulez encoder entièrement une URL, car le ( http://) ne sera pas encodé. Sinon, vous pouvez utiliser la fonction encododeURIComponent() si vous avez l'intention de coder la valeur d'un paramètre.

Mais si vous utilisez la fonction encoderURIComponent() pour encoder entièrement une URL, vous obtiendrez un résultat indésirable.

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)

Pour décoder (decode) Javascript vous offre deux fonctions,decodeURI() et decodeURIComponent(). Leurs utilisations sont similaires aux deux fonctions, encodeURI() et encodeURLComponent().

2. encodeURI(), decodeURI()

encodeURI(uri)

La fonction encodeURI(uri) retourne une chaîne (string) de caractères qui est le résultat codé (encode) du paramètre uri.

La fonction encodeURI() code (encode) tous les caractères, à l'exception :

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

La fonction encodeURI(uri) est utilisée pour encoder une URL entièrement ou partiellement, si vous le souhaitez.

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>

L'exemple d'utilisation de la fonction 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)

La fonction encodeURIComponent(uri) renvoie une chaîne (string) de caractères qui est le résultat codé (encode) du paramètre uri.

La fonction encodeURIComponent() code (encode) tous les caractères à l'exception des suivants :

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

La fonction encodeURIComponent(uri) est généralement utilisée pour encoder la valeur du paramètre 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>

xemple d'utilisation de la fonction 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?

Toutes les deux fonctions encododeURI() et encododeURIComponent() ne codent pas tous les caractères. De plus, Javascript n'a pas d'autres fonctions pour le supporter ; donc, si vous voulez, vous devez écrire votre propre fonction.

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>