Cadenas de escape: cómo poner tildes en Javascript

28 Dic 2010

Generalmente, cuando trabajamos con Javascript nos encontramos con que tenemos problemas a la hora de representar tildes o caracteres especiales en nuestras aplicaciones.

Por ejemplo, es frecuente que tengamos que mostrar un alert manteniendo el formato original del texto, esto puede ser, con tildes, eñes o saltos de línea:

alert( ' Contraseña errónea ' );

Dependiendo de la codificación de caracteres, el texto puede aparecer mal formateado:

Texto mal formateado

Para evitar estos errores, recurrimos al estándar UNICODE, una codificación diseñada para facilitar la visualización de documentos en múltiples lenguajes preservando sus grafías y caracteres originales.

La siguiente tabla muestra aquellos caracteres más utilizados en castellano:

Tabla básica para caracteres Unicode

Para introducir estos caracteres en nuestros scripts, tenemos que recurrir a la cadena de escape ‘\u’ seguida de su correspondiente código. Así, nuestro ejemplo anterior quedaría como sigue:

alert( ' Contrase\u00F1a err\u00F3nea ' );

El resultado si corresponde con lo esperado:

Representación correcta de caracteres UNICODE

Para el resto de caracteres especiales, como los saltos de línea o las tabulaciones, recurrimos al siguiente resumen:

* \n: Salto de linea.
* \r: Retorno de carro.
* \t: Tabulación horizontal.
* \v: Tabulación vertical.
* \’: Comilla simple o apostrofe.
* \”: Comilla doble.
* \\: Barra invertida.

Para utilizarlos, solo hace falta escribirlos tal cual. Así, para conseguir un mensaje con un salto de línea, escribiríamos los siguiente:

alert(  ' Contrase\u00F1a err\u00F3nea\u0021 \n Int\u00E9ntalo de nuevo. ' );

Y obtendríamos:

Direcciones de interés:

Página de referencia para códigos Unicode

Tabla dinámica Unicode

Unicode Consorcium

Más:

{7} Comentarios.

  1. Alejandro

    Muy útil, aún no sabía como poner acentos en js, pero aprenderse el código en Unicode es un poco engorroso 🙂

    • Carlos Benítez

      Jaja, es cierto Alejandro, pero pasa como casi con todo: cuando los has escrito 20 veces, terminas memorizándolos!

  2. Santiago

    Gracias por tu articulo.

    Saludos.

    Santiago de la Cruz.
    DF, Mexico

  3. fcodiaz

    esto funciona aunque la pagina este en un encodin distinto.. regularmente yo reparo igualando el encoding pero es una lata U.u

  4. Laurent

    Genialísimo… estuve peleando con esto toda la tarde de ayer para encontrar la solución. ¡Muchas gracias!

  5. Gustavo

    Me pasa eso en correos electronicos que el receptor los recibe con codigos indescifrables!! Puede ser esto?

    • Carlos Benítez

      En los correos, por lo general, los caracteres se corrompen en la conversión ISO – UTF8 y se da en aquellos que no son estándar: acentos, ñ, etc…
      Ahí, necesitas que, con el lenguaje que utilices a la hora de crear el cuerpo del correo (Java, PHP o cualquier otro) escapes la cadena para convertirla a UTF8 directamente antes de enviarla.

      Por ejemplo, para PHP hay que corregir las cabeceras del mensaje para que entienda que se trata de un ‘charset’ en UTF-8. Hay un artículo que explica bien cómo hacerlo aquí: http://www.creativasfera.com/enviar-correo-via-php-con-codificacion-utf-8-de-acentos-y-n/

      Saludos!

      Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *