Die Anleitung zu Javascript URL Encoding

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

1. Javascript URL Encoding

In dem Artikel über "HTML URL Encoding" habe ich erklärt, warum Sie eine URL enkodieren brauchen und die Zeichen-Tabelle und ihre Encode-Werte

Die Anleitung zu HTML URL Encoding

In diesem Artikel werde ich Sie zeigen, wie eine URL mit Javascript zu enkodieren und zu dekodieren.

Beginnen wir mit einer Frage "Wie eine URL mit Javascript zu enkodieren?".

Es hängt wirklich davon, was Sie möchten machen. Javascript bieten Sie 2 Funktionen an, das encodeURI() und encodeURIComponent() sind. Der Unterschied zwischen 2 Funktionen ist liegt darin, welcher Charakter enkodiert werden wird.

Die Funktion encodeURI() enkodiert alle Charakter außer der Charakter ~!@#$&*()=:/,;?+
Die Funktion encodeURIComponent() enkodiert alle Charakter außer der Charakter -_.!~*'()

Daher wird die Funktion encodeURI() eine gute Auswahl wenn Sie eine URL total enkodieren möchten. Denn der Part wie ( http:// ) wird nicht enkodiert. Verwenden Sie die Funktion encodeURIComponent() wenn Sie die Wert eines Parameter enkodieren möchten.

Wenn Sie die Funktion encodeURIComponent() zur Enkodierung eine ganze URL verwenden, bekommen Sie dann ein ungewünschtes Ergebnis.

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)

Um zu dekodieren, bietet Javascript Sie 2 Funktionen decodeURI() und decodeURIComponent() an. Ihr Gebrauch ist so gleich wie die 2 Funktionen encodeURI() und encodeURLComponent().

2. encodeURI(), decodeURI()

encodeURI(uri)

Die Funktion encodeURI(uri) gibt ein String zurück. Das ist das Ergebnis von der Enkodierung des Parameter uri.

Die Funktion encodeURI() enkodiert alle Charakter außer der folgenden Charakter:

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

Die Funktion encodeURI(uri) wird benutzt wenn Sie eine ganze URL oder eine Teil von URL enkodieren möchten.

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>

z.B: Benutzen Sie die Funktion 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)

Die Funktion encodeURIComponent(uri) gibt ein String zurück. Das ist das Ergebnis der Enkodierung des Parameter uri.

Die Funktion encodeURIComponent() enkodiert alle Charakter außer der folgenden Charakter:

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

Die Funtkion encodeURIComponent(uri) wird normalerweise benutzt um die Wert eines Parameter von URL zu enkodieren.

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>

Das Beispiel von der Verwendung der Funktion 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?

Die beiden Funtionen encodeURI() und encodeURIComponent() enkodieren alle Charakter nicht. Und Javascript hat keine anderen Funktion, es zu unterstützen. Deshalb sollen Sie Ihre eigene Funktion schreiben wenn möchten.

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>