Codificação de URL em JavaScript

Sahil Bhosale 12 outubro 2023
  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
Codificação de URL 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.

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

Artigo relacionado - JavaScript Encoding