encodeURIComponent()

uriComponent

Ein String, der als URI-Komponente (ein Pfad, Abfragezeichenfolge, Fragment usw.) kodiert werden soll. Andere Werte werden in Strings konvertiert.

Ein neuer String, der die bereitgestellte uriComponent als URI-Komponente kodiert darstellt.

URIError

Wird ausgelöst, wenn uriComponent ein alleinstehendes Surrogat enthält.

encodeURIComponent() ist eine Funktions-Eigenschaft des globalen Objekts.

encodeURIComponent() verwendet denselben Kodierungsalgorithmus wie in encodeURI() beschrieben. Es ersetzt alle Zeichen außer:

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

Im Vergleich zu encodeURI() ersetzt encodeURIComponent() eine größere Menge von Zeichen. Verwenden Sie encodeURIComponent() für benutzereingetragene Felder in Formularen, die an den Server gesendet werden — dies kodiert &-Symbole, die während der Dateneingabe versehentlich für Zeichenreferenzen oder andere Zeichen generiert werden können, die eine Kodierung/Dekodierung erfordern. Zum Beispiel könnte, wenn ein Benutzer Jack & Jill eingibt, ohne encodeURIComponent() das Ampersand auf dem Server als Beginn eines neuen Feldes interpretiert werden und die Integrität der Daten gefährden.

Für application/x-www-form-urlencoded sollen Leerzeichen durch + ersetzt werden, daher könnte es sinnvoll sein, nach einem encodeURIComponent() ein zusätzliches Ersetzen von %20 durch + durchzuführen.

Das folgende Beispiel bietet die spezielle Kodierung, die in den UTF-8-Content-Disposition- und Link-Server-Antwort-Header-Parametern erforderlich ist (z. B. UTF-8-Dateinamen):

const fileName = "my file(2).txt";
const header = `Content-Disposition: attachment; filename*=UTF-8''${encodeRFC5987ValueChars(
  fileName,
)}`;

console.log(header);
// "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"

function encodeRFC5987ValueChars(str) {
  return (
    encodeURIComponent(str)
      // The following creates the sequences %27 %28 %29 %2A (Note that
      // the valid encoding of "*" is %2A, which necessitates calling
      // toUpperCase() to properly encode). Although RFC3986 reserves "!",
      // RFC5987 does not, so we do not need to escape it.
      .replace(
        /['()*]/g,
        (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
      )
      // The following are not required for percent-encoding per RFC5987,
      // so we can allow for a little better readability over the wire: |`^
      .replace(/%(7C|60|5E)/g, (str, hex) =>
        String.fromCharCode(parseInt(hex, 16)),
      )
  );
}

Das neuere RFC3986 reserviert !, ', (, ), und *, obwohl diese Zeichen keine formalisierten URI-Abgrenzungszwecke haben. Die folgende Funktion kodiert einen String für das RFC3986-konforme URL-Komponentenformat. Sie kodiert auch [ und ], die Teil der IPv6-URI-Syntax sind. Eine RFC3986-konforme encodeURI-Implementierung sollte sie nicht kodieren, was im encodeURI() Beispiel demonstriert wird.

function encodeRFC3986URIComponent(str) {
  return encodeURIComponent(str).replace(
    /[!'()*]/g,
    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
  );
}

Ein URIError wird ausgelöst, wenn versucht wird, ein Surrogat zu kodieren, das nicht Teil eines Hoch-Tief-Paares ist. Zum Beispiel:

// High-low pair OK
encodeURIComponent("\uD800\uDFFF"); // "%F0%90%8F%BF"

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uD800");

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");

Sie können String.prototype.toWellFormed() verwenden, das alleinstehende Surrogate durch das Unicode-Ersatzzeichen (U+FFFD) ersetzt, um diesen Fehler zu vermeiden. Sie können auch String.prototype.isWellFormed() verwenden, um zu überprüfen, ob ein String alleinstehende Surrogate enthält, bevor Sie ihn an encodeURIComponent() übergeben.

• decodeURI()
• encodeURI()
• decodeURIComponent()