Cómo codificar correctamente los parámetros de una cadena de consulta
La herramienta tiene dos modos. Componente (encodeURIComponent) sirve para un nombre o valor de parámetro; URL completa (encodeURI), para una URL entera cuya estructura ya es correcta. Confundirlos es la causa más común de cadenas de consulta rotas.
Ejemplo práctico
El modo URL completa mantiene el & dentro del valor, así que el servidor lee dos parámetros en lugar de uno.
- Entrada
- https://example.com/search?q=salt & pepper&page=2
- Resultado ·
encodeURI() - https://example.com/search?q=salt%20&%20pepper&page=2
Parámetros que lee el servidor
- "q" = "salt "
- " pepper" = ""
- "page" = "2"
Codificar antes el valor en modo Componente lo mantiene como un único parámetro.
- Entrada
- salt & pepper
- Resultado ·
encodeURIComponent() - salt%20%26%20pepper
https://example.com/search?q=salt%20%26%20pepper&page=2
Parámetros que lee el servidor
- "q" = "salt & pepper"
- "page" = "2"
Modo Componente frente a URL completa, carácter por carácter
| Carácter | Componente | URL completa |
|---|---|---|
| : | %3A | : |
| / | %2F | / |
| ? | %3F | ? |
| # | %23 | # |
| & | %26 | & |
| = | %3D | = |
| + | %2B | + |
| ␠ | %20 | %20 |
| é | %C3%A9 | %C3%A9 |
Cómo lo resuelve la herramienta
- Codifica cada nombre y valor de parámetro por separado en modo Componente, que escapa & = ? # + y /.
- Une los pares codificados como nombre=valor separados por & y añade el resultado tras el ? de la URL.
- Usa el modo URL completa solo con una URL entera: conserva : / ? # & = + intactos, por lo que no protege un valor que los contenga.