Solución al problema de los acentos en JavaScript

Estrada Web Group
Administrador
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:

Cómo solucionar los errores en los acentos en JavaScript

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:

Tabla Unicode para utilizar en JavaScript

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:

Solucionado errores de acentos en JavaScript

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.

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla