🧰 UtlKit

Escapar Cadenas Online: Como una Entrada de 25 Caracteres Pasa a 27, 45 y 45 Tras los Escapes de JavaScript, HTML y URL, con los 9 Códigos JS, 5 Caracteres HTML y el Modo Percent Explicados

Pega una cadena de 25 caracteres con un ampersand, comillas y corchetes angulares: la herramienta devuelve 27 caracteres tras escapar JavaScript, 45 tras escapar HTML y 45 tras escapar URL, con seis modos y sus inversos de ida y vuelta, todo en tu navegador.

Las cadenas se rompen cuando cruzan sistemas. Una comilla doble dentro de una cadena JavaScript, un ampersand dentro de un atributo HTML, un espacio dentro de un parámetro de consulta: cada destino tiene sus propios caracteres peligrosos y su propia forma de neutralizarlos. La herramienta Escapar/Desescapar cadenas convierte una cadena pegada en la forma segura para ese destino y vuelve, todo en el navegador: nada se sube y nada sale de la pestaña. Funciona con seis modos, tres destinos en dos direcciones: Escape JavaScript, Unescape JavaScript, Escape HTML, Unescape HTML, Escape URL y Unescape URL. Toma una entrada de 25 caracteres: un saludo con un ampersand, un signo de dos puntos y una frase entre comillas dentro de corchetes angulares. Tras escapar HTML mide 45 caracteres, tras escapar URL también mide 45, y esos dos resultados de 45 son cadenas distintas, que es el punto clave.

Seis modos: tres destinos, dos direcciones

El modo JavaScript reescribe 9 de los 128 códigos ASCII como secuencias de dos caracteres: contra barra, comilla doble, comilla simple, salto de línea, retorno, tabulación, retroceso, saltar línea y el código NUL. Contra el ejemplo de 25 caracteres solo cambian las dos comillas dobles, de modo que la salida mantiene el ampersand y los corchetes angulares intactos y mide 27 caracteres; una cadena con una tabulación real y un salto real vuelve con un contra barra t y un contra barra n literales en esos lugares. El modo HTML convierte exactamente cinco caracteres: el ampersand en una referencia de cinco, los dos corchetes angulares en referencias de cuatro, la comilla doble en una de seis y la comilla simple en una referencia numérica. El modo URL es codificación percent. Cada escape tiene su gemelo unescape, y cada conversión se ejecuta al pegar, sin ida y vuelta al servidor.

El ejemplo de 25 caracteres, tres destinos

Escrito sin adornos: un saludo, un ampersand, un signo de dos puntos y una frase entre comillas dentro de corchetes angulares, 25 caracteres en total. El escape JavaScript añade una contra barra delante de cada una de las dos comillas dobles, 27 caracteres. El escape HTML sustituye el único ampersand por su referencia de cinco, las dos comillas dobles por la de seis y la pareja de corchetes angulares por referencias de cuatro: 25 más 20, llega a 45. El escape URL codifica en percent los cuatro espacios, el ampersand, el dos puntos, las dos comillas dobles y los dos corchetes angulares: diez caracteres simples se vuelven diez secuencias de tres y la suma también llega a 45, una coincidencia de esta entrada en particular. Tres destinos, tres respuestas, y la entrada nunca se cambia en el sitio: la herramienta siempre escribe una cadena nueva en el panel de salida.

Escape URL: qué conserva la codificación percent

encodeURIComponent deja intactos 71 de los 96 caracteres ASCII imprimibles: las 62 letras y cifras más nueve símbolos, el signo de exclamación, la comilla simple, los dos paréntesis, el asterisco, el punto, el guion, el guion bajo y la tilde. Todo lo demás pasa a ser un signo percent más dos dígitos hexadecimales. Por eso es un codificador de componente, no un codificador de URL: ejecútalo sobre una dirección completa de 53 caracteres con cadena de consulta y las barras, los dos puntos, el signo de interrogación y el signo igual se vuelven %2F, %3A, %3F y %3D, produciendo un componente de 75 caracteres, https%3A%2F%2Futlkit.com%2Ftools%2Fstring-escape%2F%3Fq%3DTom%20%26%20Jerry. Cuando la pregunta es una pieza de una URL frente a la URL entera, el Codificador URL separa esa decisión de forma explícita. En la otra dirección, decodeURIComponent rechaza una secuencia malformada como un %E0 suelto con un error lanzado, y la herramienta lo captura y muestra el mensaje en vez de una cadena medio decodificada.

Elegir el modo según el destino

La regla es destino primero. Código que va a leer un parser JavaScript quiere escape JavaScript; texto o valor de atributo que va a parsearse como marcado quiere escape HTML; un parámetro de consulta quiere escape URL. Las herramientas vecinas cubren los bordes: el Codificador/Decodificador de entidades HTML trabaja con referencias nombradas y numéricas, de modo que un espacio sin ruptura se vuelve   y una elipsis …; el Codificador/Decodificador Base64 saca cargas casi binarias del canal de texto por completo; y el Convertidor Hex UTF-8 Base64 muestra los mismos bytes como hexadecimal, texto UTF-8 y Base64 cuando la pregunta es qué son los bytes, no cómo citarles.

Donde las cadenas escapadas tocan el resto del conjunto

Escapar casi nunca ocurre solo. Cuando la salida escapada va a un payload JSON, pegarla en el Formatador JSON o bien lo parsea limpio o bien señala el carácter exacto que lo rompió. Cuando la entrada vino de un portapapeles lleno de caracteres invisibles, el Limpiador de espacios deja ver las tabulaciones y los saltos antes de cualquier decisión de escape, de modo que un contra barra t en la salida es una tabulación que tú enviaste, no una sorpresa.

Idas y vueltas y la trampa del doble escape

Cada escape de la herramienta tiene su inversa, que recorre la misma tabla de 128 códigos al revés: escape JavaScript seguido de unescape JavaScript devuelve la cadena original sin cambios, y el par URL también da la vuelta, incluidas las parejas hexadecimales. La calle de un solo sentido es el doble escape. Ejecuta el escape HTML dos veces y el ampersand dentro de la referencia también se escapa, de modo que el resultado se muestra como el texto visible de una referencia en vez del carácter que nombra, y deshacerlo pide dos pasadas de unescape, no una. El modo de fallo no es el escape en sí, sino aplicarlo dos veces, o una en el modo equivocado. Y cuando el problema de una cadena es su estructura y no sus caracteres, las herramientas de escape no son el instrumento adecuado: la guía de formato HTML cubre el lado de formato del mismo documento.

Herramientas Relacionadas

Preguntas Frecuentes

¿Por qué el modo de escape HTML convierte el ampersand antes que cualquier otro carácter?

Porque las cinco referencias que el modo escribe, &, <, >, " y ', empiezan cada una con un ampersand propio. En una sola pasada de izquierda a derecha, convertir primero el ampersand hace que las cuatro referencias siguientes se escriban una vez y su ampersand interno nunca se examine, de modo que el ejemplo de 25 caracteres se expande exactamente 20 y llega a 45. Cualquier otro orden vuelve a escapar las referencias sobre la marcha y la misma entrada sale mucho más larga.

Mi escape JavaScript solo cambió las dos comillas dobles del ejemplo de 25 caracteres. ¿Hay algo roto?

No. El escape JavaScript reescribe exactamente 9 de los 128 códigos ASCII: contra barra, comilla doble, comilla simple, salto de línea, retorno, tabulación, retroceso, saltar línea y NUL. El ampersand y los corchetes angulares son perfectamente legales dentro de una cadena JavaScript, de modo que pasan intactos y la salida se mantiene en 27 caracteres, dos contra barras más que la entrada. La misma entrada por el escape HTML llega a 45, porque en ese destino el ampersand y los dos corchetes son los caracteres peligrosos. El modo decide qué cuenta como peligroso.

El modo de escape URL codificó las barras y el signo de interrogación de mi dirección completa. ¿Fue un error?

No hay nada mal, pero el modo es un codificador de componente, no un codificador de URL. encodeURIComponent deja 71 de los 96 caracteres ASCII imprimibles y codifica todo lo demás, incluida la barra, los dos puntos, el signo de interrogación y el signo igual, de modo que una dirección completa de 53 caracteres con cadena de consulta sale como el componente de 75 caracteres https%3A%2F%2Futlkit.com%2Ftools%2Fstring-escape%2F%3Fq%3DTom%20%26%20Jerry. Si quieres tratar la URL entera como una unidad con su estructura intacta, la herramienta Codificador/Decodificador de URL hace esa separación explícita. En la otra dirección, decodeURIComponent lanza un error ante una secuencia percent malformada como %E0, y la herramienta muestra el mensaje en vez de una cadena a medio decodificar.

¿Escapar y luego desescapar siempre devuelve la cadena original?

Para una entrada que nunca fue escapada, sí. El escape JavaScript seguido del unescape JavaScript recorre la misma tabla de 128 códigos hacia adelante y hacia atrás y devuelve la entrada sin cambios, y el par URL también da la vuelta, incluidas las parejas hexadecimales. El fallo viene de dos direcciones más. Una es el doble escape: ejecuta el escape HTML dos veces y la segunda pasada escapa el ampersand dentro de las referencias que escribió la primera, de modo que deshacerlo pide dos pasadas de unescape, no una. La otra es desescapar datos que nunca fueron escapados: escribir un signo percent seguido de dos dígitos que no forman una secuencia válida, como un %E0 suelto, hace que decodeURIComponent lance un error, y la herramienta muestra el mensaje en vez de una cadena a medio decodificar.

¿Por qué el ejemplo de 25 caracteres llega a 45 tanto después del escape HTML como después del escape URL?

Dos aritméticas distintas, el mismo punto de llegada. El escape HTML suma 4 al único ampersand, 5 a cada una de las dos comillas dobles y 3 a cada uno de los dos corchetes angulares: 25 más 20, 45. El escape URL convierte los cuatro espacios, el ampersand, el signo de dos puntos, las dos comillas dobles y los dos corchetes angulares, diez caracteres simples, en diez secuencias percent de tres, también 25 más 20, también 45. La igualdad es una coincidencia de esta entrada en particular, y los dos resultados de 45 son cadenas distintas: una está llena de referencias de ampersand, la otra de tríos percent. Cada destino contó sus propios caracteres peligrosos, y ambos cobraron la misma suma por casualidad.

Artículos Relacionados