Cómo codificar una URL con JavaScript

Es posible que necesites codificar una URL si la envías como parte de una solicitud GET, por ejemplo.

¿Cómo se codifica una URL en JavaScript?

Dependiendo de lo que necesites hacer, hay 2 funciones de JavaScript que te ayudarán.

El primero es encodeURI()y el segundo es encodeURIComponent().

Nota: es posible que hayas leído sobre escape(), pero está obsoleto y no debería utilizarse.

Estos dos métodos difieren en los caracteres que codifican.

En detalle, encodeURI()no codifica ~!@#$*()=:/,;?+y encodeURIComponent()no codifica -_.!~*'(), codifica todos los demás caracteres. ¿Por qué difieren? Porque están pensados ​​para usos diferentes:

• encodeURI()Está destinado a codificar una URL completa
• encodeURIComponent()Está destinado a codificar un único valor de parámetro de URL.

Si tuviera que llamar encodeURIComponent()a una URL completa, dado que codifica /, los separadores de ruta de la URL también se codificarían (entre otras cosas):

encodeURI("http://flaviocopes.com/ hey!/")//"http://flaviocopes.com/%20hey!/"encodeURIComponent("http://www.example.org/a file with spaces.html")// "http%3A%2F%2Fflaviocopes.com%2F%20hey!%2F"

MDN propone una mejora para cumplir con el estándar RFC 3986 ( http://tools.ietf.org/html/rfc3986 ), implementando la siguiente función:

const fixedEncodeURIComponent = (str) = {  return encodeURIComponent(str).replace(/[!'()*]/g, (c) = {    return '%' + c.charCodeAt(0).toString(16)  })}

Lo llamas para cada parámetro que agregarás a la URL.

Los métodos encodeURI()y encodeURIComponent()tienen un decodeURI()y correspondiente decodeURIComponent()que hace el trabajo opuesto que puedes usar en el backend si usas Node.js.

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript