Codificador y decodificador de URL

Qué es un codificador y decodificador de URL

Una URL solo puede contener un subconjunto de ASCII: letras, dígitos y un puñado de símbolos reservados para su propia sintaxis (:, /, ?, #, &, =…). Todo lo demás —espacios, acentos, símbolos, emojis, cualquier carácter fuera de ese conjunto— tiene que ir escapado como secuencias %XX, donde XX es el byte en hexadecimal. Codificar una URL es justo eso: convertir texto arbitrario en algo que sobrevive dentro de ella sin romper su estructura ni perder información por el camino.

Esta herramienta escapa y desescapa texto en el navegador, con tres variantes según lo que vayas a pegar, porque JavaScript trae tres funciones distintas para tres situaciones distintas — y usar la que no toca es la fuente más común de bugs con acentos y espacios en query strings.

Cómo se usa

1. Elige Codificar o Decodificar en los botones de Modo, arriba del todo.
2. Di qué estás codificando: un valor suelto, una URL completa o un campo de formulario. Cada botón trae debajo una frase que explica qué caracteres respeta y cuáles escapa.
3. Pega el texto y copia el resultado. Se recalcula con cada carácter que escribes, la fila de recuentos te da los caracteres de entrada y de salida, y Copiar lo manda al portapapeles.

Los tres modos y cuándo toca cada uno

encodeURIComponent es la que casi siempre quieres para un valor suelto: un parámetro de búsqueda, un fragmento de texto que va dentro de una query string. Escapa todo lo que no sea letra, dígito o - . _ ~, así que un &, un = o un / que aparezcan dentro del valor se codifican y no se confunden con la sintaxis de la URL que los envuelve.

encodeURI es la que usas cuando el texto ya es una URL completa y solo quieres escapar lo que sobra sin destrozar su estructura. Deja intactos once caracteres más que encodeURIComponent no perdona: # $ & + , / : ; = ? @. Esa lista de once símbolos es literalmente toda la diferencia entre las dos funciones, y es la razón de que codificar una URL entera con encodeURIComponent la deje inservible, convirtiendo cada / y cada : del https:// en %2F y %3A.

El campo de formulario existe por un motivo muy concreto: cuando un formulario HTML se envía, o cuando construyes una query string con URLSearchParams, el espacio no se codifica como %20 sino como +. new URLSearchParams({q: "a b"}) da q=a+b, no q=a%20b. El problema aparece al decodificar: decodeURIComponent("a+b") devuelve literalmente a+b, con el signo más incluido, porque esa función no sabe nada de formularios. Si decodificas a lo tonto una query que vino de un formulario, cada espacio se te convierte en un + que no debería estar ahí. Por eso este modo va aparte: al decodificar trata el + como espacio antes de desescapar el resto.

Un detalle que casi nadie menciona: como este modo delega en el propio URLSearchParams en vez de reimplementarlo, resulta ser más estricto que encodeURIComponent. Escapa cuatro de los cinco caracteres que la otra se salta — ! ' ( ) pasan a %21 %27 %28 %29 — y solo deja intacto el asterisco.

Límites honestos

encodeURIComponent no escapa cinco caracteres que el RFC 3986 deja fuera de su conjunto «unreserved» pero que tampoco toca: ! ' ( ) *. Ese conjunto real son solo A-Z, a-z, 0-9 y - . _ ~. En la práctica, un valor con un apóstrofo o con paréntesis —algo constante en español, donde ambos aparecen todo el rato en nombres y frases— puede seguir confundiendo a un parser mal escrito aunque ya lo hayas «codificado» con la función estándar.

Una secuencia de porcentaje incompleta no se decodifica a medias, revienta: decodeURIComponent("%E0%A4%A") lanza un URIError en vez de devolver algo aproximado. Si pegas algo cortado o corrupto, esta herramienta te va a enseñar el error tal cual, no una versión adivinada del resultado. Y al decodificar una URL completa se respeta el inverso exacto de encodeURI, así que un %2F se queda como %2F: convertirlo en una barra cambiaría la forma de la URL, no solo su texto.

Nada de lo que escribas sale del navegador ni queda guardado en ningún sitio: no hay servidor que reciba tu URL, tu token o el parámetro que estás depurando, y todo desaparece en cuanto recargas la página.

Por qué es gratis

Escapar y desescapar texto lo hacen encodeURIComponent, encodeURI y unas pocas líneas de JavaScript alrededor — nada que necesite un servidor, un modelo ni ningún coste por uso. Al no haber nada que pagar cada vez que alguien codifica una URL, no hay motivo para poner esto detrás de una cuenta ni de un límite de uso.