Codificação de URL em JavaScript

1. Qual é a diferença entre URI e URL?
2. Codificando um URL usando o método encodeURI() em JavaScript
3. Codificando um URL usando o método encodeURIComponent() em JavaScript

Uma codificação de URL é um processo de codificação de caracteres de 8 bits dentro do URL com% seguido por um caractere hexadecimal. Também é conhecido como codificação de porcentagem, pois estamos substituindo os caracteres por um sinal de porcentagem. Uma codificação de URL pode ser feita usando quase qualquer linguagem de programação, incluindo JavaScript.

A razão por trás da codificação de um URL é que um URL pode conter apenas caracteres específicos da tabela ASCII. Todos os outros caracteres presentes no URL precisam ser codificados para que o URL funcione corretamente. Os caracteres que precisam de codificação em um URL são ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', Bem como '%'. Para obter mais informações sobre esses caracteres e sua forma de codificação, você pode visitar este link.

Qual é a diferença entre URI e URL?

Antes de avançar, vamos primeiro obter um entendimento sobre URI e URL.

Um Uniform Resource Identifier (URI) é usado para identificar um recurso na Internet. Em contraste, Uniform Resource Locator (URL) é algo que o ajuda a localizar e alcançar esse recurso.

Um URI também pode ser um identificador, bem como um localizador, enquanto um URL só pode ser um localizador. Um URL vem em URI; portanto, ambos parecem um pouco semelhantes, mas têm diferenças sutis entre eles.

Por exemplo, facebook.com é um URL porque leva onde a página da web do Facebook está localizada, enquanto uma cafeteria próxima pode ser um URI porque você sabe onde fica a cafeteria (que é um recurso) e também sabe como chegar lá (o caminho).

Codificando um URL usando o método encodeURI() em JavaScript

O método encodeURI() é um dos métodos que pode ser usado para codificar uma URL em JavaScript. Este método pode ser usado se você tiver um URL completo.

Digamos que temos uma URL como https://en.wikipedia.org/[$q=english &language], e agora vamos codificar essa URL usando o método encodeURI() para ver qual saída esse método fornece.

const URL = "https://en.wikipedia.org/[$q=english &language]";
console.log(encodeURI(URL));

Resultado:

https://en.wikipedia.org/%5Bq=english%20&language%5D

Observe que esse método codifica apenas poucos caracteres em uma URL, como um espaço em branco e colchetes.

Este método não codificará os seguintes caracteres especiais.

encodeURI()` will not encode: `~!@#$&*()=:/,;?+'

Se você quiser codificar alguns dos outros caracteres especiais, pode usar o método encodeURIComponent().

Codificando um URL usando o método encodeURIComponent() em JavaScript

O método encodeURIComponent() também pode ser usado para codificar um URL. Este método pode ser usado se você tiver apenas uma parte de um URL. Como já vimos, o método encodeURI() codifica muito poucos caracteres, mas se você quiser codificar alguns outros caracteres também, pode usar o método encodeURIComponent().

Vamos pegar a mesma URL que pegamos anteriormente e ver qual saída obtemos quando usamos esse método para codificar a string.

const URL = "https://en.wikipedia.org/[$q=english &language]";
console.log(encodeURIComponent(URL));

Resultado:

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

Como você pode ver, esse método codificou a maior parte do URL.

Este método não codificará os seguintes caracteres especiais.

encodeURIComponent()` will not encode: `~!*()'

Dependendo de seus requisitos e uso, você pode usar qualquer um ou ambos os métodos acima para codificar uma URL em JavaScript.