Codificación de URL en JavaScript

1. ¿Cuál es la diferencia entre URI y URL?
2. Codificación de una URL usando el método encodeURI() en JavaScript
3. Codificación de una URL usando el método encodeURIComponent() en JavaScript

Una codificación de URL es un proceso de codificación de caracteres de 8 bits dentro de la URL con% seguido de un carácter hexadecimal. También se conoce como codificación porcentual, ya que reemplazamos los caracteres con un signo de porcentaje. Se puede realizar una codificación de URL utilizando casi cualquier lenguaje de programación, incluido JavaScript.

La razón detrás de la codificación de una URL es que una URL solo puede contener caracteres específicos de la tabla ASCII. Todos los demás caracteres presentes dentro de la URL deben estar codificados para que la URL funcione correctamente. Los caracteres que deben codificarse en una URL son ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', Así como '%'. Para obtener más información sobre estos caracteres y su forma de codificación, puede visitar este enlace.

¿Cuál es la diferencia entre URI y URL?

Antes de seguir adelante, primero comprendamos algo sobre URI y URL.

Un Uniform Resource Identifier (URI) se utiliza para identificar un recurso en Internet. Por el contrario, el Uniform Resource Locator (URL) es algo que le ayuda a localizar y llegar a ese recurso.

Un URI también puede ser tanto un identificador como un localizador, mientras que una URL solo puede ser un localizador. Una URL viene bajo URI; por lo tanto, ambos suenan un poco similares pero tienen diferencias sutiles entre ellos.

Por ejemplo, facebook.com es una URL porque toma la ubicación de la página web de Facebook, mientras que una cafetería cercana puede ser una URI porque usted sabe dónde está la cafetería (que es un recurso) y también sabe cómo llegar a ella (la ruta).

Codificación de una URL usando el método encodeURI() en JavaScript

El método encodeURI() es uno de los métodos que se pueden utilizar para codificar una URL en JavaScript. Este método se puede utilizar si tiene una URL completa.

Digamos que tenemos una URL como https://en.wikipedia.org/[$q=english &language], y ahora codifiquemos esta URL usando el método encodeURI() para ver qué salida proporciona este método.

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

Producción :

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

Tenga en cuenta que este método solo codifica muy pocos de los caracteres en una URL, como un espacio en blanco y corchetes.

Este método no codificará los siguientes caracteres especiales.

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

Si desea codificar algunos de los otros caracteres especiales, puede utilizar el método encodeURIComponent().

Codificación de una URL usando el método encodeURIComponent() en JavaScript

El método encodeURIComponent() también se puede utilizar para codificar una URL. Este método se puede utilizar si solo tiene una parte de una URL. Como ya hemos visto, el método encodeURI() codifica muy pocos caracteres, pero si desea codificar algunos otros caracteres también, puede utilizar el método encodeURIComponent().

Tomemos la misma URL que tomamos anteriormente y veamos qué resultado obtenemos cuando usamos este método para codificar la cadena.

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

Producción :

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

Como puede ver, este método ha codificado la mayor parte de la URL.

Este método no codificará los siguientes caracteres especiales.

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

Dependiendo de sus requisitos y uso, puede usar uno o ambos de los dos métodos anteriores para codificar una URL en JavaScript.