Herramientas de desarrollo · Codificador y decodificador de URL
Lo que el constructor de URL codifica para usted: los conjuntos de codificación porcentual del navegador
· Cómo funciona
codificación de URL javascript qué API web
La API de URL codifica silenciosamente algunos caracteres y deja otros en paz, dependiendo de en qué parte de la URL lleguen. Esta publicación explica los conjuntos de codificación WHATWG y cómo predecir el resultado.
El espacio que se convirtió en %20 y el | que permaneció: un caso concreto en el que la nueva URL() codificó parcialmente una ruta
Cuando se ejecuta una nueva URL ("https://example.com/hello mundo"), el espacio se convierte en %20 de forma silenciosa. Pero la nueva URL("https://example.com/hello|world") deja la tubería intacta. Esta diferencia no es aleatoria. El estándar de URL WHATWG define conjuntos de caracteres separados para codificar cada componente de la URL: ruta, consulta, fragmento e información de usuario tienen cada uno sus propias reglas. Comprender estos conjuntos significa predecir lo que hará el constructor.
El espacio necesita codificación porcentual porque no es seguro en HTTP y altera la legibilidad. La tubería es diferente: no es un carácter reservado que divide la estructura, por lo que el navegador lo deja solo. La línea entre seguridad y legibilidad la traza WHATWG, no conjeturas. La prueba de "hola mundo" muestra la codificación; probar "hello|world" revela los límites de cada parte de la URL.
Una URL, varios conjuntos de codificación: ruta, consulta, fragmento e información de usuario tienen cada uno su propia lista de caracteres para escapar
Una URL contiene varias regiones, cada una con sus propias reglas de codificación. La ruta sigue un conjunto, consulta otro, fragmenta un tercero, información de usuario un cuarto. Un espacio se convierte en %20 en ruta y consulta. Un signo igual permanece en la consulta, donde separa claves y valores, pero encodeURIComponent lo convierte en %3D. El constructor de URL conoce su contexto y aplica las reglas correctas para cada parte.
Los conjuntos de codificación son precisos y pequeños. Path tiene su propia lista de personajes; La consulta tiene una lista similar pero diferente. Esto refleja qué personajes tienen un significado estructural. Una barra diagonal divide los segmentos de la ruta, por lo que encodeURIComponent la codifica como %2F. En el fragmento, puede existir una barra diagonal sin romper nada. Comprender las reglas de WHATWG significa predecir el resultado sin ejecutar código.
Por qué la codificación porcentual es unidireccional: lo que permanece codificado permanece así
El constructor de URL realiza una normalización unidireccional. Pase "%20" a la nueva URL y generará %20 sin cambios. El constructor lo reconoce como ya codificado y lo deja solo. Es por eso que la doble codificación es importante: codifica una vez, pasa por el constructor y la codificación se mantiene. El constructor no decodifica, reinterpreta ni recodifica; se lee hacia adelante.
Esta propiedad unidireccional afecta a las aplicaciones que confían en URL.href como canónica. Si concatena la entrada del usuario con su ruta, la entrada se normaliza pero no se decodifica. Un valor como "mi+archivo" permanece como está o se convierte en "mi%2Barchivo" en algunos contextos. El código posterior que utilice decodeURIComponent podría leerse como un espacio si proviene de datos del formulario. El constructor se normaliza una vez; después de eso, su valor es fijo.
Ejemplo resuelto: pasar la misma cadena desordenada a través de una nueva URL() y leer href, nombre de ruta y parámetros de búsqueda: tres vistas diferentes
Tome "hello world&foo=bar|test#anchor" y colóquelo en una nueva URL con diferentes componentes. El espacio se convierte en %20 en todas partes. El signo comercial en la ruta permanece (no tiene significado estructural allí), pero en la consulta también permanece (separa los parámetros, por lo que la normalización perdería el límite entre "q=" y "foo=bar"). La tubería y el hash se comportan de manera diferente según la ubicación.
La lectura de href, nombre de ruta y parámetros de búsqueda muestra tres vistas diferentes. nombre de ruta muestra la ruta codificada sin esquema, host o consulta. searchParams proporciona parámetros decodificados, por lo que "hola+mundo" de los datos del formulario se convierte en un espacio. La propiedad de búsqueda conserva la cadena literal. href muestra la URL normalizada completa. Estos coexisten en un objeto; cuál usar depende de su próximo paso.
URLSearchParams y la regla de codificación de formularios: por qué produce + para espacios mientras que el nombre de ruta produce %20
URLSearchParams aplica codificación de formulario: el espacio se convierte en más, no en %20. new URLSearchParams({q: "hello world"}) produce "q=hello+world", no "q=hello%20world". Esta es la regla de aplicación histórica /x-www-form-urlencoded. Pero si pasa esta cadena como consulta sin formato a una nueva URL, el plus sigue siendo más; sólo URLSearchParams lo decodifica como espacio. El constructor es fiel a lo que ve.
Esta diferencia de signo más causa errores comunes. Una URL de la barra de direcciones usa %20 para espacios. Los datos del formulario utilizan plus. Si decodifica con decodeURIComponent (que se lee literalmente más) en lugar de URLSearchParams.get, los espacios se convierten en caracteres más. El codificador y decodificador de URL muestra ambos: pegue "hola+mundo" y compare los modos de componente y formulario para ver dónde aparece el espacio.
Comparación con encodeURI: dónde coinciden y dónde divergen
El constructor de URL y encodeURIComponent son herramientas diferentes. encodeURIComponent codifica casi todo excepto letras, dígitos y - _ no reservados. ! ~*'( ). No asume ningún contexto. El constructor de URL analiza una URL real y aplica reglas WHATWG por componente. encodeURIComponent convierte "hello/world" en "hello%2Fworld"; la nueva URL ve barras como separadores de ruta. Misma entrada, diferente salida.
Utilice encodeURIComponent al crear una URL concatenando piezas. Utilice URLSearchParams o el constructor de URL para URL completas o parciales. No utilice encodeURIComponent en una URL completa; destrozarás el plan. Compare el resultado con la intención. El navegador impone opiniones sobre la estructura de la URL y la nueva URL las implementa. El codificador y decodificador de URL muestra ambas vistas una al lado de la otra.
Lo que esto no cubre: análisis de host, IDNA y esquemas especiales versus no especiales
El estándar de URL WHATWG es la fuente de la verdad, aunque leerlo requiere paciencia. Los conjuntos de codificación se definen en fragmentos de algoritmo, no en listas simples. En la práctica, comprender el principio es más importante que memorizar conjuntos. La ruta permite más caracteres (las barras diagonales son estructurales); la consulta tiene sus propias reglas; El fragmento tiene menos restricciones (se maneja en el lado del cliente, nunca se envía a los servidores). Cada componente tiene sus propias reglas; Saber esto te dice dónde buscar.
La normalización y la validación son límites diferentes. El constructor normaliza: limpia la codificación porcentual, aplica las reglas de los componentes y proporciona la forma canónica. No valida: se arrojan caracteres no válidos, pero se aceptan hosts vacíos. El constructor es estricto con el formato pero indulgente con la interpretación. Para conocer el cumplimiento exacto de las especificaciones, lea la sección de bytes codificados por porcentaje de WHATWG. Para la creación diaria, utilice URLSearchParams, la API de URL y ejemplos reales.
Conclusión: el analizador tiene opiniones: cómo el codificador y decodificador de URL le muestra la codificación porcentual simple de un valor o una dirección para que pueda compararlo con lo que produjo el navegador.
Las características de WHATWG no admitidas aquí incluyen el análisis de host con conversión de IDNA (nombres de dominio internacionales a ASCII) y manejo de esquemas especiales versus no especiales. Archivo: las URL utilizan autoridad de doble barra; datos: las URL no. El constructor hace cumplir estas reglas. Convertir nombres de host y determinar estados especiales pertenece a la lectura de especificaciones, no a la codificación porcentual. Esto es importante al crear URL en diferentes esquemas.
Pruebe la construcción de su URL comparando la interpretación del navegador con las expectativas. Compile con una nueva URL, lea las propiedades importantes: href para el formulario completo, nombre de ruta para la ruta, búsqueda para consulta sin formato, searchParams para decodificado. Si el resultado te sorprende, pégalo en el codificador y decodificador de URL y sigue la transformación paso a paso. La herramienta muestra una salida normalizada junto con la codificación sin formato, lo que revela la diferencia. Comprender los conjuntos WHATWG significa comprender las opciones del navegador y cómo trabajar con ellas.