Guía Completa de Codificación URL: Principios y Práctica de la Codificación Porcentual

Repaso de la Estructura de URL

https://user:pass@www.example.com:8080/path/to/page?name=张三&age=25#section
└──┬──┘ └────┬────┘ └──────┬──────┘└─┬─┘└────┬─────┘└──────┬──────┘└──┬──┘
  scheme   userinfo     host      port    path        query     fragment

Solo las partes de path, query y fragment necesitan codificación. Scheme y host siguen sus propias reglas.

Por Qué Es Necesaria la Codificación URL

Las URLs solo pueden contener caracteres ASCII imprimibles. Los siguientes deben codificarse:

Carácter	Codificación	Razón
Espacio	`%20` o `+`	Los espacios simples no están permitidos
Chino「张三」	`%E5%BC%A0%E4%B8%89`	No ASCII
`&`	`%26`	Separador de consulta
`=`	`%3D`	Separador clave=valor
`#`	`%23`	Marcador de fragmento
`?`	`%3F`	Inicio de consulta
`/`	`%2F`	Separador de ruta

Usar la Herramienta de Codificación/Decodificación URL de ToolsKu

Pasos

Abre la herramienta de Codificación/Decodificación URL
Ingresa una URL o texto
Elige codificar o decodificar
Ve el resultado

encodeURI vs encodeURIComponent

Función	No codificado	Caso de uso
`encodeURI()`	`: / ? # [ ] @ ! $ & ' ( ) * + , ; =`	URL completa
`encodeURIComponent()`	`A-Z a-z 0-9 - _ . ! ~ * ' ( )`	Valores de parámetros URL

const base = 'https://example.com/search';

// ✅ Codificar valores de parámetros
const url = `${base}?q=${encodeURIComponent('hello world')}`;
// → https://example.com/search?q=hello%20world

// ❌ Codificar la URL completa
const wrong = encodeURIComponent('https://example.com/search?q=test');
// → https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

Escenarios Prácticos

Parámetros de consulta en chino

Original: https://search.com/q=前端开发
Codificado:  https://search.com/q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

Analizar parámetros URL

Usa la herramienta de Análisis URL para desglosar una URL y mostrar los parámetros de consulta en una tabla:

Entrada: https://api.com/users?name=张三&role=admin&page=1
Salida:
  name  = 张三
  role  = admin
  page  = 1

Nombres de dominio internacionalizados (IDN)

Codificación Punycode para el dominio chino「工具库.com」:

工具库.com → xn--6qq986b3xl.com

Usa la herramienta Punycode para convertir entre formas.

Parámetros URL codificados en Base64

A veces necesitas codificar un objeto JSON como parámetro URL:

{"user":"admin","role":"editor"}
  → Base64 → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0=
  → URL encode → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0%3D

Errores Comunes

Doble codificación

Original:     hello world
Una vez codificado: hello%20world  ✅
Dos veces codificado: hello%2520world  ❌ (decodificar una vez → hello%20world)

Codificar la URL completa

Usa encodeURIComponent solo en valores de parámetros, no en la URL completa.

Espacio: `+` o `%20`?

En parámetros de consulta: + y %20 son equivalentes
En rutas: solo %20 es válido
Recomendación: usa %20 consistentemente

Resumen

La codificación URL es una habilidad fundamental del desarrollo Web. Entender la diferencia entre encodeURI y encodeURIComponent, la codificación UTF-8 para parámetros en chino, y Punycode para dominios internacionalizados ahorra horas de depuración. ToolsKu proporciona herramientas de Codificación/Decodificación URL, Análisis URL y Punycode.