Herramientas para desarrolladores · Codificador y decodificador de URL
encodeURI vs encodeURIComponent: qué caracteres deja en paz cada uno
· Cómo funciona
codificación de URL javascript flujo de trabajo del desarrollador
Las dos funciones de JavaScript difieren exactamente en once caracteres, y elegir la incorrecta rompe una URL o no logra escapar un valor. Esta publicación detalla los conjuntos y brinda una regla que puedes recordar.
La búsqueda que devolvió todo porque & en 'I+D' dividió la consulta: un error concreto de la función incorrecta
Una búsqueda de I+D puede devolver accidentalmente resultados para R si el código construye ?q=R&D a mano. El signo comercial es un separador entre los parámetros de consulta; no se conserva como parte de q a menos que codifique el valor. Elegir encodeURI para esa pequeña pieza es un error, no un error del servidor. La opción más segura en el código de la aplicación suele ser URLSearchParams, pero comprender las dos primitivas de JavaScript hace que el código existente sea mucho más fácil de depurar.
Lo que comparten ambas funciones: el conjunto sin reservas que nunca tocan y la codificación porcentual UTF-8 que ambas aplican
Ambos métodos dejan letras ASCII, dígitos y puntuación sin reservas - _. ! ~ * ' ( ) intacto según las reglas de codificación de JavaScript. Convierten caracteres no ASCII a UTF-8 bytes antes de escribir tripletes de porcentaje: é se convierte en %C3%A9, ni un solo Latin-1 byte. También codifican un espacio como %20. La codificación porcentual consiste en preservar la estructura de un URI; no se trata de escape HTML, validación de entradas o protección contra secuencias de comandos maliciosas en la página receptora.
Los once caracteres que sólo conserva encodeURI — ; , /? : @ & = + $ # y por qué cada uno tiene un significado estructural en una URL
encodeURI además conserva once caracteres estructurales que codifica encodeURIComponent: ; , /? :@&=+$#. Para una dirección completa, dejar la barra diagonal y el signo de interrogación solos conserva la ruta y la sintaxis de la consulta. Para un valor de consulta, dejar pasar & o = cambiaría la lista de parámetros, mientras que un # sin escape puede iniciar un fragmento. Las funciones difieren precisamente porque una está destinada a una dirección completa y la otra a un componente dentro de esa dirección.
Una regla que se cumple: los valores obtienen encodeURIComponent, las URL completas obtienen encodeURI y por qué la 'URL completa' es más rara de lo que parece
Los valores casi siempre obtienen encodeURIComponent; Las direcciones completas y ya estructuradas son el caso menos común de encodeURI. Para una URL que esté construyendo mediante programación, use la API de URL para manejar la ruta y los parámetros de búsqueda en lugar de concatenar una combinación de piezas codificadas y sin procesar. No codifique una URL completa con encodeURIComponent y luego espere que las barras y los dos puntos sigan comportándose como separadores. Por el contrario, no introduzca el término de consulta de un usuario a través de encodeURI y deje su signo activo.
Ejemplo resuelto: la misma cadena a través de ambas funciones: una tabla de resultados para un valor con espacios, &, / y acento
Tome I+D/café como un valor de consulta. encodeURIComponent devuelve R%26D%20%2F%20caf%C3%A9, protegiendo el signo y la barra. encodeURI devuelve R&D%20/%20caf%C3%A9, preservando la puntuación estructural; un prefijo ingenuo ?q= ahora crearía un delimitador no deseado. Ambos codifican el espacio y el acento, por lo que una prueba que utilice solo "hola mundo" omite la distinción importante. Compare las cadenas generadas en ToolAcre, luego péguelas en un analizador de URL y verifique cuántos parámetros de consulta aparecen.
Errores comunes: codificar una URL completa con encodeURIComponent y decodificar con la contraparte incorrecta
Codificar una URL completa como un componente produce %3A%2F%2F donde un consumidor esperaba ://. Decodificar una dirección completa antes de validarla puede reintroducir separadores reservados con nuevos significados. También evite codificar dos veces un valor que ya contenga %26: el signo de porcentaje en sí puede convertirse en %25, por lo que una segunda capa de decodificación puede cambiar de significado nuevamente. Empareje encodeURIComponent con decodeURIComponent para un componente y trate los porcentajes de escape con formato incorrecto como errores de entrada.
Lo que esto no cubre: codificación de formularios con + y creación de URL con URLSearchParams
La codificación de consultas de formularios HTML utiliza un signo más para un espacio en application/x-www-form-urlencoded, que es distinto de la salida %20 de estas dos funciones. URLSearchParams maneja esas reglas de formulario por usted. Este artículo no cubre la normalización de rutas, la conversión de nombres de host Unicode ni la decisión sobre si es seguro solicitar una URL decodificada; La codificación de URL es un paso de representación, no una política de autorización.
Conclusión: codifique las partes, no el todo: cómo el codificador y decodificador de URL muestra ambos modos para que pueda ver la diferencia en su propia entrada
El límite memorable es partes versus todo: el valor de un parámetro es una parte, así que use encodeURIComponent o URLSearchParams. El codificador y decodificador de URL muestra ambas funciones del navegador para la misma cadena y mantiene el experimento local. Pruebe la entrada que contenga &, =, #, barra diagonal y acento antes de decidir que dos codificadores son intercambiables.