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.