Die Anleitung zu Javascript URL Encoding

View more Tutorials:

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
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 [email protected]#$&*()=:/,;?+
  • 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 d ecodeURI():
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="[email protected]"/>

    <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 = "[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?

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>

View more Tutorials: