Función encodeURI de JavaScript

Durante gran parte de su vida, JavaScript fue un lenguaje solo para navegadores. Naturalmente, tiene muchas funciones integradas específicas para los navegadores, como codificar cadenas usando la función encodeURI.

Durante gran parte de la vida de JavaScript, fue un lenguaje de programación solo para navegadores y no podía ejecutarse en el lado del servidor como ahora. Debido a esto, JS tiene muchas funciones integradas que son específicas de las funciones del lado del navegador, como codificar cadenas para usar en URL. Algunas de las funciones más utilizadas son:

  • codificarURI
  • encodeURIComponent
  • decodificarURI
  • decodificarURIComponent
  • escapar
  • unescape

La función en la que se centra este artículo, encodeURI, se utiliza para codificar un Identificador uniforme de recursos (URI) de modo que los caracteres que no deben usarse en un URI (como un espacio) se formatean correctamente. Estos caracteres se escapan usando codificación porcentual, o codificación URL, para representar los caracteres URI no estándar.

La codificación de porcentaje es simplemente una representación hexadecimal del carácter ASCII con el prefijo del carácter de porcentaje (%). Entonces, por ejemplo, la representación de codificación porcentual del signo de exclamación (!) es %21 ya que 21 es el número hexadecimal ASCII para el signo de exclamación.

En términos de casos de uso, digamos que su sitio web tiene una barra de búsqueda y las consultas ingresadas allí se usan para construir una URL como esta:

1
https://mysite.com/q=[SEARCH_QUERY]

En un caso de uso como este, es muy probable que el usuario ingrese una cadena que contenga un espacio (u otro carácter reservado), que no está permitido en las URL. Entonces, ¿qué hacemos si el usuario ingresa la cadena "desarrollo web", por ejemplo? No podemos permitir cualquier carácter en nuestra URL. Ahí es donde entra encodeURI:

1
2
3
4
> let query = 'web development';
> let searchUrl = 'https://mysite.com/q=' + query;
> encodeURI(searchUrl)
'https://mysite.com/q=web%20development'

Observe cómo el espacio ha sido reemplazado con la codificación porcentual, %20. La función encodeURI es perfecta para esto porque no escapa a ningún otro carácter reservado, como los dos puntos o la barra inclinada. Esto se debe a que espera recibir una URL completa como entrada, a diferencia de la variación encodeURIComponent de esta función. La URL pasada a encodeURI puede contener cualquier parte válida de un esquema de URL y no puede escaparse, mientras que otros caracteres reservados o no permitidos están codificados:

1
2
3
4
> encodeURI('https://scott:[correo electrónico protegido]:443/my/file.html?stack=abuse#javascript')
'https://scott:[correo electrónico protegido]:443/my/file.html?stack=abuse#javascript'
> encodeURI('https://scott:[correo electrónico protegido]:443/my/file.html?stack="abuse"#javascript')
'https://scott:[correo electrónico protegido]:443/my/file.html?stack=%22abuse%22#javascript'

Observe cómo no se realizaron cambios en la URL en la primera llamada anterior. Esto se debe a que todos los caracteres son válidos en una URL. En la segunda llamada tenemos unas comillas, que no son válidas, y por tanto codificadas.

Los siguientes caracteres no están codificados por encodeURI, independientemente de dónde se encuentren en la URL: A-Za-z0-9;,/?:@&=+$-_.!~*'() #

Esta función puede incluso manejar la codificación de caracteres que no son ASCII utilizando una codificación basada en UTF-8 más larga. Por ejemplo, el símbolo de la moneda del euro (€) se codifica utilizando conjuntos de codificación de tres por ciento:

1
2
> encodeURI('€')
'%E2%82%AC'

Esto permite que los caracteres de cualquier idioma o caracteres de formato especial se pasen a través de direcciones URL.

Conclusión

La función encodeURI incorporada de JavaScript es útil para formatear correctamente las URL, o más genéricamente, las URI con caracteres ASCII no reservados o incluso caracteres UTF-8. Debe usarse cada vez que se use la entrada del usuario para construir una URL para garantizar que permanezca con el formato correcto.

Por otro lado, también tenemos la función integrada decodeURI, que maneja la decodificación de los valores codificados en porcentaje, que veremos en otro artículo.