Función encodeURIComponent()‎ en JavaScript

La función encodeURIComponent()‎ en javascript codifica un componente de un componente URI (Identificador uniforme de recursos) reemplazando cada copia de un carácter determinado con una o más secuencias de escape que representan la codificación UTF-8 del carácter en cuestión.

Características generales

La función encodeURIComponent escapa a todos los caracteres excepto:

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

La función difiere encodeURIComponent de la función encodeURI como se muestra en el siguiente ejemplo. Tenga en cuenta que la principal diferencia entre ellas está en la codificación de los caracteres reservados y el código #:

var set1 =  ";, /?: @ & = + $ #" ;   // caracteres reservados 
var set2 =  "-_.! ~ * '()" ;     // etiquetas no reservadas 
var set3 =  "#" ;             // código cuadrado 
var set3 =  "ABC abc 123" ;   // letras, números y espacios

console.log(encodeURI(set1)); // ;,/?:@&=+$#
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (observe cómo se simboliza el espacio)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (observe cómo se simboliza el espacio)

Utilizar la función encodeURIComponent sobre los campos ingresados ​​por el usuario desde los formularios que serán enviados por POST al servidor, este codificará el carácter &que se pueda generar automáticamente durante el proceso de conversión de códigos HTML u otros.

Por ejemplo, si el usuario escribe la cadena de texto » Jack & Jill«, la cadena se codificará como » Jack & Jill, y sin usar la función encodeURIComponent, el código del servidor se interpretará como el inicio de un nuevo campo de formulario, lo que generará errores en el procesamiento del formulario.

Cuando usa el siguiente tipo MIME application/x-www-form-urlencoded, código Vcioda en +lugar de los espacios en blanco, por lo que podemos usar la función encodeURIComponent para codificar . +%20

Si queremos seguir el RFC3986 Directiva (que se reserva el! , ', ), (y *, a pesar de que estos personajes no tienen ningún uso especial en los enlaces de URI), podemos utilizar la siguiente función:

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Estructura encodeURIComponent()‎ javascript

encodeURIComponent ( str );

str

Una cadena que representa un componente del URI.

Valor a devolver

Cadena que representa la versión codificada del URI del componente.

Soporte de navegadores

• 
  Expresión const en JavaScript
• 
  Expresión let en JavaScript
• 
  Expresión var en JavaScript
• 
  Expresión try…catch en JavaScript
• 
  Expresión throw en JavaScript
• 
  Continue en JavaScript
• 
  Switch en JavaScript
• 
  Expresiones if…else en JavaScript
• 
  Declaración vacía o empty en JavaScript
• 
  Break en JavaScript
• 
  Sentencia block en JavaScript
• 
  Arguments en JavaScript
• 
  Promise en JavaScript
• 
  Number en JavaScript
• 
  Características JSON en JavaScript
• 
  Array en JavaScript
• 
  RegExp en JavaScript
• 
  String en JavaScript
• 
  Date en JavaScript
• 
  Math en JavaScript
• 
  URIError en JavaScript
• 
  TypeError en JavaScript
• 
  SyntaxError en JavaScript
• 
  ReferenceError en JavaScript
• 
  RangeError en JavaScript
• 
  EvalError en JavaScript
• 
  Características Boolean en JavaScript
• 
  Error en JavaScript
• 
  Función Symbol en JavaScript
• 
  Constructor Function en JavaScript
• 
  Constructor Object en JavaScript
• 
  Función unescape()‎ en JavaScript
• 
  Función eval()‎ en JavaScript
• 
  Valor null en JavaScript
• 
  Características Undefined en JavaScript
• 
  Características NaN en JavaScript
• 
  Características Infinity en JavaScript
• 
  Función parseFloat()‎ en JavaScript
• 
  Función isNaN()‎ en JavaScript
• 
  Función isFinite()‎ en JavaScript
• 
  Función escape()‎ en JavaScript
• Función encodeURIComponent()‎ en JavaScript