Al desarrollar aplicaciones web, es común transmitir información a través de la URL utilizando pares clave-valor conocidos como query strings. Sin embargo, cuando estos valores contienen caracteres especiales o de alfabetos no latinos, es frecuente encontrarse con problemas de codificación (caracteres extraños o "mojibake").

El problema de la codificación en la URL

Los navegadores web codifican automáticamente los caracteres especiales dentro de una URL utilizando una codificación de porcentaje (por ejemplo, los espacios se convierten en %20). Si intentamos extraer estos valores directamente o utilizando funciones obsoletas como unescape(), el resultado será una cadena de texto corrupta.

Extracción de parámetros mediante expresiones regulares

Una forma robusta de obtener un parámetro específico sin depender de librerías externas es mediante el uso de expresiones regulares. A continuación, se presenta una implementación que corrige el error de visualización de caracteres especiales mediante decodeURIComponent:

/**
 * Obtiene el valor de un parámetro de la URL por su nombre.
 * @param {string} clave El nombre del parámetro a buscar.
 * @return {string|null} El valor decodificado o null si no existe.
 */
function extraerParametro(clave) {
    const patron = new RegExp("[?&]" + clave + "=([^]*)", "i");
    const coincidencia = patron.exec(window.location.href);
    
    if (coincidencia && coincidencia.length > 1) {
        // decodeURIComponent gestiona correctamente caracteres UTF-8
        return decodeURIComponent(coincidencia[1]);
    }
    return null;
}

// Ejemplo de uso:
// URL: index.html?usuario=Ramón&accion=editar
const nombreUsuario = extraerParametro("usuario");
console.log("Nombre del usuario:", nombreUsuario); // Salida: Ramón

Uso de la API moderna: URLSearchParams

En entornos modernos, es preferible utilizar la interfaz URLSearchParams, la cual simplifica significativamente la lógica y maneja la decodificación de forma nativa:

const stringBusqueda = window.location.search;
const parametros = new URLSearchParams(stringBusqueda);

if (parametros.has('nombre')) {
    const valorSaneado = parametros.get('nombre');
    console.log(valorSaneado);
}

Diferencias entre funciones de decodificación

Para evitar errores de representación, es fundamental elegir la función de procesamiento adecuada en JavaScript:

• decodeURI(): Se utiliza para decodificar una URL completa. Mantiene intactos caracteres con significado especial en la URL (como #, ?, &).
• decodeURIComponent(): Se utiliza para decodificar los valores individuales de los parámetros. Es la opción recomendada para procesar datos que vienen después del signo "=".

Equivalencia en entornos de servidor (Java)

Si el procesamiento de estos parámetros debe realizarse en el lado del servidor, específicamente en Java, se utilizan las clases del paquete java.net para asegurar que la codificación UTF-8 se mantenga íntegra:

// Codificación de una cadena para ser enviada en URL
String valorCodificado = java.net.URLEncoder.encode("Texto con acento", "UTF-8");

// Decodificación de un parámetro recibido
String valorDecodificado = java.net.URLDecoder.decode(valorRecibido, "UTF-8");

Al aplicar estos métodos, se garantiza que la integridad de los datos se mantenga durante el tránsito entre el cliente y el servidor, eliminando los fallos de visualización por codificaciones incorrectas.