Decodificar URL JavaScript

1. Necesidad de codificación y decodificación de URL
2. Decodificación de URL en JavaScript
3. Conclusión

Este artículo analiza la decodificación de URL y cómo decodificar una URL codificada usando JavaScript.

Necesidad de codificación y decodificación de URL

Hay ciertos caracteres que debe tener una URL. Una URL puede incluir caracteres US-ASCII, como números del 0 al 9 y caracteres de la a a la z, y algunos caracteres especiales.

Sin embargo, algunas URL pueden tener caracteres o caracteres especiales que no están en US-ASCII. Ahí es cuando necesitamos la codificación de URL.

La codificación de URL nos permite tener una URL en un formato adecuado, es decir, en una forma aceptable, incluso si tiene caracteres especiales fuera de la tabla US-ASCII.

Consulte el siguiente ejemplo.

http://example.us/url encoding

En la URL anterior, hay un espacio entre la URL y la codificación, que no es aceptable para un formato de URL. Al codificar la URL, el espacio en blanco será reemplazado por algunos caracteres especiales y la URL tendrá el formato adecuado.

Podemos usar la decodificación de URL para decodificar una URL codificada. Este proceso es el inverso de la codificación de URL.

Cuando decodificamos una URL, podemos tener la URL de una manera más legible.

Decodificación de URL en JavaScript

En JavaScript, hay tres métodos para decodificar una URL codificada.

1. Método unescape()
2. Método decodeURI()
3. Método decodeURIComponent()

Utilice el método sin escape() para decodificar una URL codificada

Este método está en desuso en JavaScript, lo que significa que la función no se usa en JavaScript. En lugar de usar esta función, podemos usar las otras dos opciones para decodificar una URL codificada.

Utilice el método decodeURI() para decodificar una URL codificada

En JavaScript tenemos el método encodeURI() para codificar una URL y decodeURI() para decodificar una URL codificada. El método encodeURI() codifica la dirección URL sin las partes de la dirección relacionadas con el dominio (HTTPS, nombre de dominio, etc.).

decodeURI() es el método inverso de encodeURI(), que decodifica la URL codificada con caracteres regulares. A continuación se muestran las sintaxis de los métodos decodeURI() y encodeURI().

Sintaxis:

// Syntax for encoding
encodeURI(content to encode)

// Syntax for decoding
decodeURI(content to decode)

Para ver el proceso de decodificación, necesitamos tener una URL codificada. Tomemos una URL de muestra.

http://example.us /url encoding

Como primer paso, debemos asignar la URL a una variable como una cadena a continuación.

let exURL = ' http://example.us /url encoding';

Luego lo codificamos usando el método encodeURI() e imprimimos usando el método console.log().

let encodedURL = encodeURI(exURL);
console.log(encodedURL);

En la declaración anterior, hemos asignado el método encodeURI() a una variable llamada encodedURL. De otra manera, podemos usar directamente la función encodeURI() dentro de la función console.log() como se muestra a continuación.

console.log(encodeURI(exURL));

Ambas formas nos dan el mismo resultado, así que avancemos con la primera ruta. Ahora nuestro código JavaScript completo debería verse así.

Código completo:

let exURL = 'http://example.us /url encoding';
let encodedURL = encodeURI(exURL);
console.log(encodedURL);

Producción:

Ahora vamos a decodificarlo usando el método decodeURI(). En primer lugar, podemos asignar el proceso decodeURI() a otra variable, como se muestra a continuación.

let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);

Producción:

Como puede ver, obtendremos la URL decodificada del proceso anterior.

Utilice el método decodeURIComponent() para decodificar una URL codificada

El método decodeURIComponent() es el método inverso del método encodeURIComponent(). El método encodeURIComponent() codifica la dirección URL con las partes relacionadas con el dominio.

Además, codifica un conjunto de caracteres especiales, cosa que no hace el método encodeURI(). Aquí está la lista de personajes únicos.

El enfoque decodeURIComponent() decodifica la URL codificada con los caracteres y símbolos relevantes.

Sintaxis:

// Syntax for encoding
encodeURIComponent(content to encode)

// Syntax for decoding
decodeURIComponent(content to decode)

Tomemos una URL de ejemplo.

https://stackoverflow.com/url+encoded string+in javascript

En el ejemplo anterior, hay marcas de espacios, /, : y + dentro de la URL. Codifiquemos la URL usando el método encodeURIComponent().

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';
let encoded = encodeURIComponent(exURL);
console.log(encoded);

Producción:

Ahora intentemos decodificarlo usando el método decodeURIComponent() como se muestra a continuación.

let decoded = decodeURIComponent(encoded);
console.log(decoded);

Como arriba, hemos asignado el método decodeURIComponent() a una variable. Imprímelo usando el método console.log().

Producción:

Como puede ver, la URL que codificamos se ha dado como la URL decodificada.

Código completo:

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';

let encoded = encodeURIComponent(exURL);
console.log(encoded);

let decoded = decodeURIComponent(encoded);
console.log(decoded);

Conclusión

Este artículo introdujo brevemente JavaScript y enseñó qué es la codificación y decodificación de URL. Luego discutimos principalmente dos métodos: decodeURI() y decodeURIComponent(), junto con algunos ejemplos.

Ambos métodos funcionan de dos maneras para utilizar el método adecuado según el requisito. El método unescape() ha quedado obsoleto recientemente y, en su lugar, podemos usar los otros dos métodos como soluciones.