Artigo original: https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/

Você pode até pensar que encodeURI e encodeURIComponent fazem a mesma coisa, ao menos ao olhar para seus nomes. Você também pode estar confuso sobre qual deles usar e quando usar.

Neste artigo, tentarei desmistificar a diferença entre encodeURI e encodeURIComponent.

O que é um URI e qual a sua diferença de um URL?

URI é a sigla para Uniform Resource Identifier (em português, identificador de recurso uniforme).
URL é a sigla para Uniform Resource Locator (em português, localizador de recurso uniforme).

Qualquer coisa que identifique de modo único um recurso é seu URI: exemplos disso são o id, o nome ou o número no ISBN. Um URL especifica um recurso e como ele pode ser acessado (o protocolo). Todos os URLs são URIs, mas nem todo URI é um URL.

Por que precisamos codificá-los?

URLs somente podem ter alguns caracteres do conjunto padrão de 128 caracteres ASCII. Caracteres reservados que não pertençam a esse conjunto devem ser codificados.

Isso significa que precisamos codificar esses caracteres ao passarmos um URL. Caracteres especiais, como &, espaço e !, ao serem inseridos em um URL, necessitam de um "escape", ou podem causar situações imprevisíveis.

Casos de uso:

  1. O usuário enviou valores em um formulário que podem estar no formato de string e precisam ser passados, como campos de URL.
  2. É preciso aceitar parâmetros de consulta em formato de strings para fazer solicitações do tipo GET.

Qual é a diferença entre encodeURI e encodeURIComponent?

encodeURI e encodeURIComponent são usados para codificar os identificadores de recurso uniformes (URIs) ao substituir determinados caracteres por uma, duas, três ou quatro sequências de escape que representem a codificação UTF-8 do caractere.

encodeURIComponent deve ser usado para codificar um componente URI – uma string que se suponha que seja parte de um URL.

encodeURI deve ser usado para codificar um URI ou um URL existente.

Aqui temos uma tabela bastante útil para ver a diferença na codificação dos caracteres

Quais caracteres são codificados?

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

encodeURIComponent() não codificará: ~!*()'

Os caracteres A-Z a-z 0-9 - _ . ! ~ * ' ( ) não recebem o "escape".

Exemplos

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

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


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

Quando codificar

  1. Ao aceitar uma entrada que possa ter espaços.
encodeURI("http://www.mysite.com/a file with spaces.html") //Resultado: http://www.mysite.com/a%20file%20with%20spaces.html

2. Ao criar um URL a partir de parâmetros de consulta em formato de string.

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

3. Ao aceitar parâmetros de consulta que possam ter caracteres reservados.

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

Resumo

Se você tiver um URL completo, use encodeURI. Se, no entanto, tiver apenas parte de um URL, use encodeURIComponent.