Solución al problema de los acentos en JavaScript

En este tutorial aprenderás a solucionar el problema de los acentos en JavaScript
, cuando intentamos enviar una alerta o un mensaje con JavaScript
, este nos remplaza los acentos por otros caracteres, a continuación, te mostrare como solucionar este problema.
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 mensaje manteniendo el formato original del texto, esto puede ser, con tildes o acentos, eñes o saltos de línea.
Dependiendo de la codificación de caracteres, el texto puede aparecer mal formateado como se muestra en la siguiente imagen:
En la imagen tengo una validación con jQuery y los mensajes que se deben mandar son los siguientes y como lo puedes ver manejo muchos acentos o tildes.
jQuery.extend(jQuery.validator.messages, {
required: "Este campo es obligatorio.",
remote: "Por favor, rellena este campo.",
email: "Por favor, escribe una dirección de correo válida",
url: "Por favor, escribe una URL válida.",
date: "Por favor, escribe una fecha válida.",
dateISO: "Por favor, escribe una fecha (ISO) válida.",
number: "Por favor, escribe un número entero válido.",
digits: "Por favor, escribe sólo dígitos.",
creditcard: "Por favor, escribe un número de tarjeta válido.",
equalTo: "Por favor, escribe el mismo valor de nuevo.",
accept: "Por favor, escribe un valor con una extensión aceptada.",
maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
});
Para evitar estos errores debemos utilizar el 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:
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:
jQuery.extend(jQuery.validator.messages, {
required: "Este campo es obligatorio.",
remote: "Por favor, rellena este campo.",
email: "Por favor, escribe una direcci\u00F3n de correo v\u00E1lida",
url: "Por favor, escribe una URL v\u00E1lida.",
date: "Por favor, escribe una fecha v\u00E1lida.",
dateISO: "Por favor, escribe una fecha (ISO) v\u00E1lida.",
number: "Por favor, escribe un número entero v\u00E1lido.",
digits: "Por favor, escribe s\u00F3lo dígitos.",
creditcard: "Por favor, escribe un número de tarjeta v\u00E1lido.",
equalTo: "Por favor, escribe el mismo valor de nuevo.",
accept: "Por favor, escribe un valor con una extensi\u00F3n aceptada.",
maxlength: jQuery.validator.format("Por favor, no escribas m\u00E1s de {0} caracteres."),
minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
});
Y el resultado es el siguiente:
Para el uso de otros caracteres especiales, como los saltos de línea o las tabulaciones, recurrimos a las siguientes opciones:
* \n: Salto de linea.
* \r: Retorno de carro.
* \t: Tabulación horizontal.
* \v: Tabulación vertical.
* \’: Comilla simple o apostrofe.
* \»: Comilla doble.
* \\: Barra invertida.