encodeURIComponent()

Prubalo

// Encodes characters such as ?,=,/,&,:
console.log(`?x=${encodeURIComponent("test?")}`);
// Expected output: "?x=test%3F"

console.log(`?x=${encodeURIComponent("")}`);
// Expected output: "?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

Sintaxis

encodeURIComponent(uriComponent)

Parmetros

uriComponent

Una cadena que se codificar como un componente de URI (una ruta, cadena de consulta, fragmento, etc.). Otros valores son convertidos a cadenas.

Valor de retorno

Una nueva cadena de caracteres que representa el uriComponent proporcionado codificado como un componente URI.

Excepciones

URIError

Se lanza si uriComponent contiene un sustituto solitario.

Descripcin

encodeURIComponent() es una propiedad de tipo funcin del objeto global.

encodeURIComponent() usa el mismo algoritmo de codificacin que se describe en encodeURI(). Escapa todos los caracteres excepto:

AZ az 09 - _ . ! ~ * ' ( )

En comparacin con encodeURI(), encodeURIComponent() escapa un conjunto ms amplio de caracteres. Usa encodeURIComponent() en campos ingresados por el usuario en formularios enviados con POST al servidor, ya que esto codificar los smbolos & que podran generarse inadvertidamente durante la entrada de datos para caracteres de referencia u otros caracteres que requieran codificacin/decodificacin. Por ejemplo, si un usuario escribe Jack & Jill, sin encodeURIComponent(), el smbolo & podra interpretarse en el servidor como el inicio de un nuevo campo y poner en riesgo la integridad de los datos.

Para application/x-www-form-urlencoded, los espacios deben reemplazarse por +, por lo que puede que se desee continuar una llamada a encodeURIComponent() con un reemplazo adicional de la cadena %20 por +.

Ejemplos

Codificacin para encabezados Content-Disposition y Link

El siguiente ejemplo proporciona la codificacin especial requerida dentro de los parmetros de los encabezados de respuesta del servidor Content-Disposition y Link con codificacin UTF-8 (por ejemplo, nombres de archivos UTF-8):

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)
      // A continuacin crea las secuencias %27 %28 %29 %2A (ntese que
      // la codificacin vlida de "*" es %2A, lo que requiere llamar a
      // toUpperCase() para codificar correctamente). Aunque RFC3986 reserva "!",
      // RFC5987 no lo hace, por lo que no es necesario escaparlo.
      .replace(
        /['()*]/g,
        (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
      )
      // Los siguientes cdigos no son necesarios para el percent-encoding segn el
      // RFC5987,
      // por lo que podemos permitir una mejor legibilidad en la transmisin: |`^
      .replace(/%(7C|60|5E)/g, (str, hex) =>
        String.fromCharCode(parseInt(hex, 16)),
      )
  );
}

Codificacin para RFC3986

El RFC3986 ms reciente reserva !, ', (, ), y *, aunque estos caracteres no tienen usos formalizados para la delimitacin de un URI. La siguiente funcin codifica una cadena para un formato de componente de URL compatible con RFC3986. Tambin codifica [ y ], que son parte de la sintaxis de URI IPv6. Una implementacin de encodeURI compatible con RFC3986 no debera escapar estos caracteres, como se demuestra en el ejemplo de encodeURI().

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

Codificacin de un sustituto solitario lanza

Un URIError ser lanzado si se intenta codificar un sustituto que no es parte de un par alto-bajo. Por ejemplo:

// El par alto-bajo est bien
encodeURIComponent("\uD800\uDFFF"); // "%F0%90%8F%BF"

// Un cdigo solitario de sustituto alto lanza "URIError: secuencia de URI mal formada"
encodeURIComponent("\uD800");

// Un cdigo solitario de sustituto bajo lanza "URIError: secuencia de URI mal formada"
encodeURIComponent("\uDFFF");

Puedes usar String.prototype.toWellFormed(), que reemplaza los sustitutos solitarios con el carcter de reemplazo de Unicode (U+FFFD), para evitar este error. Tambin puedes usar String.prototype.isWellFormed() para verificar si una cadena contiene sustitutos solitarios antes de pasarla a encodeURIComponent().

Especificaciones

Compatibilidad con navegadores

Vase tambin

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