Quizás pienses que encodeURI y encodeURIComponent hacen lo mismo ya que sus nombres son similares. ¿Cuándo y cómo utilizarlos?

En este artículo, desmitificaré la diferencia entre encodeURI y encodeURIComponent.

¿Qué es una URI y cómo se diferencia de una URL?

URI significa Identificador de Recurso Uniforme (Uniform Resourse Identifier).

URL significa Localizador de Recurso Uniforme (Uniform Resource Locator).

Cualquier cosa que excepcionalmente identifique un recurso es su URI como id, nombre, o número ISBN. Un URL especifica un recurso y cómo se puede evaluar (el protocolo). Todas las URL pero no todas las URI son URL.

¿Por qué necesitamos codificar?

Las URL solo pueden tener ciertos caracteres de los 128 set de caracteres estándar ASCII. Se debe codificar los caracteres reservados que no pertenezcan a este set.

Esto significa que es necesario codificar los caracteres cuando pasan a una URL. Cuando los caracteres especiales como &, space, ! entran en una URL, se tienen que escapar ya que sino pueden causar situaciones impredecibles.

Ejemplos de uso:

  1. El usuario envió valores en un formulario que puede estar en un formato de string y se deben pasar, tal como los campos URL.
  2. Es necesario aceptar parámetros de cadena de consulta (query string parameter) para realizar una solicitud GET.

¿Cual es la diferencia entre encodeURI y encodeURIComponent?

encodeURI y encodeURIComponent se utilizan para codificar Identificadores de Recurso Uniforme (URI) al remplazar cierto caracter por uno, dos, tres o cuatro secuencias de escape que representen la codificación UTF-8 de los caracteres.

El encodeURIComponent se debe utilizar para codificar un URI Component  (una string que supuestamente debe ser parte de una URL).

El encodeURI se debe utilizar para codificar una URI o una URL existente.

Tabla útil de las diferencias en la codificación de caracteres.

¿Qué caracteres están codificados?

encodeURI() no codificará: ~!@#$&*()=:/,;?+'

encodeURIComponent() no codificará: ~!*()'

Los caracteres A-Z a-z 0-9 - _ . ! ~ * ' ( ) no se escapan.

Ejemplos

const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

Cuándo codificar

  1. Cuando se acepta una entrada (input) que puede tener espacios.
encodeURI("http://www.mysite.com/a file with spaces.html"

2. Cuando se crea una URL desde un parámetro de solicitud (query parameter).

 let param = encodeURIComponent('mango')
 let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99

3. Cuando se aceptan parámetros de solicitud que puede que tengan caracteres reservados.

let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple

Resumen

Si tienes una URL completa, utiliza encodeURI. Pero si tienes una parte de una URL, utiliza encodeURIComponent.

Traducido del artículo de Shruti Kapoor - JavaScript URL Encode Example – How to Use encodeURIcomponent() and encodeURI()