¿Qué hace encodeURIComponent? Una explicación simple con ejemplos

Si ha creado una URL en JavaScript, probablemente se haya encontrado con encodeURIComponent y posiblemente con su hermano confusamente similar, encodeURI. Usar el incorrecto es un error clásico que rompe enlaces de manera sutil. Aquí hay una explicación clara de lo que hace encodeURIComponent, con ejemplos y una regla simple para elegir entre los dos.

que hace

encodeURIComponent toma una cadena y reemplaza cualquier carácter que no sea seguro en una URL con su equivalente codificado en porcentaje. Un espacio se convierte en %20, un signo y se convierte en %26, un signo igual se convierte en %3D, un signo de interrogación se convierte en %3F, y así sucesivamente. El propósito es hacer que un fragmento de texto sea seguro para colocarse en una URL como un valor, un término de búsqueda, un parámetro, un destino de redireccionamiento, sin que los caracteres especiales se malinterpreten como estructura de URL. Codifica todo lo que podría causar un problema, que es exactamente lo que desea para un valor único.

Un ejemplo concreto

Supongamos que desea crear una URL de búsqueda para la consulta "perros y gatos". Si simplemente lo concatenas, obtienes ...?q=cats & dogs, que se rompe, el signo comercial se lee como separador de parámetros y el espacio es ilegal. Primero ejecute el valor a través de encodeURIComponent y "cats & dogs" se convierte en cats%20%26%20dogs, lo que le da ...?q=cats%20%26%20dogs, que el servidor lee correctamente como el valor único "cats & dogs". La codificación preserva el significado de sus datos al escapar de los caracteres que de otro modo serían estructurales.

encodeURIComponent vs encodeURI

La diferencia es lo que cada uno deja en paz. encodeURIComponent codifica todo lo reservado, incluidos los caracteres de estructura de URL como /? & = #, porque supone que estás codificando un valor que va dentro de una URL. encodeURI deliberadamente no codifica esos caracteres de estructura, porque supone que está codificando una URL completa ya creada y desea mantenerla funcional. Entonces encodeURI('https://x.com?a=b c') mantiene ://, ? y = intactos y solo corrige el espacio, mientras que encodeURIComponent escaparía de todos ellos. Utilice componente para las piezas, encodeURI para una URL completa.

la regla sencilla

Esta es la regla que lo mantiene fuera de problemas: si está codificando un valor que va dentro de una URL, un término de búsqueda, un valor de parámetro, un segmento de ruta, un destino de redireccionamiento, use encodeURIComponent. Si está codificando una URL completa y desea que siga siendo una URL funcional, utilice encodeURI. Cuando no está seguro, casi siempre desea encodeURIComponent, porque casi siempre está codificando un valor, no una URL completa. Hacer esto correctamente evita los errores más comunes en la creación de URL.

Cuidado con la doble codificación

Una trampa: nunca ejecute encodeURIComponent en una cadena que ya esté codificada. Si codifica un valor dos veces, los signos de porcentaje se codifican, %20 se convierte en %2520 y el enlace se rompe. Codifique únicamente texto sin formato y sin codificar. Si no está seguro de si una cadena ya está codificada, decodifíquela primero y luego codifíquela exactamente una vez. Este error de doble codificación es la fuente del misterioso %2520 que a veces ves en las URL rotas.