Tildes en Javascript

Uno de los problemas mas recurrentes es el mostrar correctamente los caracteres tildados, eñes entre otros (á, é, í, ó, ú, ñ…), esto es sencillo de resolver en html utilizando el código html del mismo, pero si deseamos mostrar tildes en Javascript, por ejemplo en un alert obtenemos resultados indeseados.

Por ejemplo si tenemos el siguiente script que muestra un mensaje de alerta a los usuarios, ala ejecutarlo se mostraran caracteres extraños dependiendo de la codificación de la página.

  1. function hello() { 
  2.     alert("Atención Perú!!!");
  3. }

Cadenas de escape en Javascript
Las cadenas de escape permiten introducir caracteres especiales en Javascript como saltos de linea, tildes, tabuladores, etc. Entre estas cadenas de escape podemos listar:

  • \n: Salto de linea.
  • \r: Retorno de carro.
  • \t: Tabulación horizontal.
  • \v: Tabulación vertical.
  • \’: Comilla simple o apostrofe.
  • \”: Comilla doble.
  • \\: Barra invertida.
  • \xdd: Caracter especial especificado por dos dígitos hexadecimanes dd

Esta ultima cadena de escape nos permitirá mostrar todos los caracteres que deseamos, para ello solo nos hace falta conoces los equivalentes hexadecimales de los caracteres.

Tabla de Caracteres Especiales
Los caracteres especiales están expresados en números hexadecimales y con ellos podremos imprimir cualquier caracter de acuerdo a nuestras necesidades.

Luego reemplazando las letras tildadas por sus equivalentes tendríamos la función de ejemplo:

  1. function hello() { 
  2.     alert("Atenci\xf3n Per\xfa!!!");
  3. }

Pueden ver el ejemplo funcionando en Tildes en Javascript en donde podemos ver el resultado de aplicar los caracteres especiales. Además de ello pueden encontrar una tabla de equivalentes mas completa en Unicode Character Table.

Comentarios Total 24 comentarios


gafeman
Publicado: 17/05/2008 10:05 am

muchas gracias, muy util !!

alex
Publicado: 17/05/2008 10:56 am

Para evitar esos problemas simplemente se debe especificar la codificación adecuada.

Ñuño Martínez
Publicado: 19/05/2008 7:20 am

@alex: Debería, pero no siempre funciona. En el curro ya hemos configurado, reconfigurado y requeteconfigurado tanto Apache como PHP y MySQL y no hay manera. Al menos ahora hemos conseguido que las cadenas que tomamos directamente de MySQL las envíe con el &xacute; de marras, pero con los “alert” seguimos con problemas (yo edito en UTF-8, se supone que Apache dice en la cabecera que lo envía en UTF-8, pero por alguna razón se empeña en interpretarlo con la codificación de Windows).

@unijimpe: Gracias. A ver si ahora la cosa funciona.

Caracteres especiales en JavaScript
Publicado: 20/05/2008 8:55 pm

[…] Vía: unijimpe […]

Carlos
Publicado: 28/05/2008 1:06 pm

Cierto, como dice alex, con la codificación adecuada, ya es suficiente.

El archivo js debe estar codificado en utf8 sin BOM (Byte order mark), el html debe de tener las cabeceras de meta type content de utf8, y el archivo tambien codificado con urf8. No me ha dado problemas siguiendo esta configuracion, y utilizado en proyectos grandes.

Carlos
Publicado: 28/05/2008 1:12 pm

@Ñuño: Sobre lo de la extraccion de la DB, no hace falta que no sustituyas por ´ etc… se soluciona (primero teniendo la DB en utf-8) y segundo haciendo la primera query despues de la conexion con SET NAMES ‘utf8’ (si no recuerdo mal).
Con esto no hay caracter raro que se te resista

ray
Publicado: 08/09/2008 4:08 pm

(y) eso es lo que quer\xeda

Eddy Faustor
Publicado: 08/09/2008 4:08 pm

(Y) buena con la fija de javascript (\xed)

peter
Publicado: 16/09/2008 8:25 pm

dque onda..

amo al que invento eso.. lo amo.

osdave
Publicado: 12/01/2009 8:22 am

hola,
gracias por esta información, me sera muy util.
Te falta la ñ, y como he puesto este post en favoritos para cuando lo necesitare, aqui lo añado: \xF1
saludos

osdave
Publicado: 12/01/2009 8:23 am

perdon, acabo de verla.
y perdon por el doble comentario

Christian
Publicado: 02/02/2009 9:53 am

Gracias!!!

Ñandú "ThE JoKeR" Reddie
Publicado: 07/05/2009 12:12 pm

Gracias me ahorraste unos dolores de cabeza que ya me estaban empezando!!

:D

Maria Jose
Publicado: 14/08/2009 10:16 am

Muy útil. Muchas gracias!!

Paúl
Publicado: 09/09/2009 10:22 pm

Gracias

iav
Publicado: 24/09/2009 11:36 am

buen post pero hay otras opciones como poner á que es para la (á) , etc etc pruebes con esto tambien espero le sirva

Paulo McNally
Publicado: 11/12/2009 9:39 am

Muy util, desde hace mucho tenia esta incognita. Saludos

mizusoft
Publicado: 15/07/2010 11:48 pm

Muy buen aporte.
Agrego que hay una pagina donde se puede poner el caracter y te dice cual es el codigo en javascript

http://0xcc.net/jsescape/

javi
Publicado: 22/11/2010 7:35 am

Genial, me soluciono un problema Gracias

Sergio_Z
Publicado: 29/11/2010 5:15 pm

Muy bien! Gracias esto a sido para mi muy util.
esto tiene que ir a mi comunidad…

Hugo
Publicado: 13/06/2011 11:55 pm

super re-contra hiper genio me salvaste la vida men, era esto o tirarme del 4 piso.

Nimrod Jansen
Publicado: 22/08/2011 12:07 pm

Saludos, me ha servido mucho su información, aunque yo no la he utilizado en un alert sino en .text por jquery, y funciona muy bien.

Muchas gracias

Randy Espíritu
Publicado: 09/07/2012 1:33 am

excelente información, como comentan todo se soluciona con la codificación adecuada, sin embargo nunca esta de más saber este tipo de información.

Por si a alguien le interesa, tuve que crear una función bastante básica y mejorable para salir de un problema con un cliente.

Se las dejo espero les sirva tanto como a mi.

function cambiar_acentos($str){

$a = array(‘á’, ‘é’, ‘í’, ‘ó’, ‘ú’, ‘ñ’, ‘Á’,’É’,’Í’,’Ó’,’Ú’,’Ñ’);
$b = array(‘\xe1’, ‘\xe9’, ‘\xed’, ‘\xf3’, ‘\xfa’, ‘\xf1′,’\xc1′,’\xc9′,’\xcd’,’\xd3′,’\xda’,’\xd1′);
return str_replace($a, $b, $str);

}

Anónimo
Publicado: 14/02/2013 11:10 am

Gracias muy buen aporte

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)