Skip to main content
Mejorando el detalle de la respuesta
Origen Enlace
NekoOs
  • 1.4k
  • 7
  • 19

PD: Adaptación para la solucion

/** Función para construir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    /* Obtienes el carácter y lo escapas en caso de que sea un caracter especial para expresiones regulares */
    var caracter = cadena[i].replace(/[()[\]{}\/\\^$*+?.|]/g, '\\$&');
    retorno.push(`(${caracter})?`);
  }
  var patron = retorno.join('')
  return new RegExp(patron, 'i');
}

/** Función que verifica los caracteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var mensaje = '';                          // Inicializamos el mensaje
  var patron = crearPatron(texto);           // Se construye el patron
  var hallado = criterio.match(patron);      // Se consulta a ver que coincidencia hallamos
  hallado.shift();                           // La posicion (0) es irrelevante para nosotros  
  for (var i = 0; i < hallado.length; i++) { // Recorremos todas las coincidencias    
    var original = {}, erronea = {},         // Definimos algunas variables que usaremos
        letraOriginal = texto[i];      
        
    // Si la coincidencia no era lo esperado, Omitiendo los espacios
    if (hallado[i] != letraOriginal && letraOriginal != ' ') {    
      original = buscarPalabra(i, texto);
      erronea = buscarPalabra(i, hallado);      
      original.letra = original.palabra[original.pos];
      erronea.letra = hallado[i+1] ? hallado[i+1] : erronea.palabra[erronea.pos];
      // Si es posible se construye un mensaje de salida
      if (esDefinido(erronea.letra)) {
        mensaje += `palabra: ${original.palabra} \t`
        mensaje += `letra Original: ${original.letra} \t`
        mensaje += `letra erronea: ${erronea.letra}\n`;      
      }
    }
    
    mostrarMensaje(mensaje, "erroresFrecuentes");
  }
}

/**********************************************************************
/*                      DIVIDE Y VENCERAS
/*********************************************************************/

function esDefinido(variable) {
  return (typeof variable != "undefined");
}

// Aquí posiblemente debio crearse una funcion para obtener los objetos (original, erronea)

/**********************************************************************
/*                      IMPLEMENTACION
/*********************************************************************/
var texto = document.getElementById('captureInput');
var textoEstatico = "hola soy el texto estatico de prueba";

/** 
/* Esta funcion permite extraer una palabra de un arreglo de caracteres, usando 
/* como base la posicion de un caracter dentro de la misma, ademas retorna informacion
/* sobre la posicion real de ese caracter en la palabra.
*/
function buscarPalabra(indice, texto) {
  for (var inicio = indice;
    (inicio > 0) && (texto[inicio] != ' '); inicio--);
  for (var fin = indice;
    (fin < texto.length) && (texto[fin] != ' '); fin++);
  inicio = (inicio > 0) ? inicio + 1 : inicio;
  return {
    pos: indice - inicio, //Posicion real del caracter
    palabra: Array.prototype.join.call(texto.slice(inicio, fin), '') //Palabra completa
  };
}

/** Solo reinicio el contenido de la caja en cada tipeo para mayor legibilidad */
function mostrarMensaje(mensaje, caja) {
  var contenedor = document.getElementById(caja);
  contenedor.innerHTML = mensaje;
}

/** Este evento tiene en cuenta cualquier cambio provocado por teclado o copia-pega del raton */
texto.addEventListener('input', function() {
  mostrarNoCoincidentes(this.value, textoEstatico);
});

// Ejemplo de funcionamiento al ejecutar el fragmento de codigo
texto.value = "hla soy el texto esatc";
mostrarNoCoincidentes(texto.value, textoEstatico);
<p>hola soy el texto estatico de prueba</p>
<textarea id="captureInput" placeholde="escribe aqui" autofocus></textarea>
<pre id="erroresFrecuentes" style="overflow-y: scroll; height:200px;"></pre>

Ahora debe quedar claro que aún tiene las limitaciones planteadas para la adición de nuevos caracteres, pero resuelve el inconveniente presentado para la tecla de retroceso al no depender de la posición tipeada, sino de la comparación completa de los términos en la oración.


PD: Adaptación para la solucion

/** Función para construir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    /* Obtienes el carácter y lo escapas en caso de que sea un caracter especial para expresiones regulares */
    var caracter = cadena[i].replace(/[()[\]{}\/\\^$*+?.|]/g, '\\$&');
    retorno.push(`(${caracter})?`);
  }
  var patron = retorno.join('')
  return new RegExp(patron, 'i');
}

/** Función que verifica los caracteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var mensaje = '';                          // Inicializamos el mensaje
  var patron = crearPatron(texto);           // Se construye el patron
  var hallado = criterio.match(patron);      // Se consulta a ver que coincidencia hallamos
  hallado.shift();                           // La posicion (0) es irrelevante para nosotros  
  for (var i = 0; i < hallado.length; i++) { // Recorremos todas las coincidencias    
    var original = {}, erronea = {},         // Definimos algunas variables que usaremos
        letraOriginal = texto[i];      
        
    // Si la coincidencia no era lo esperado, Omitiendo los espacios
    if (hallado[i] != letraOriginal && letraOriginal != ' ') {    
      original = buscarPalabra(i, texto);
      erronea = buscarPalabra(i, hallado);      
      original.letra = original.palabra[original.pos];
      erronea.letra = hallado[i+1] ? hallado[i+1] : erronea.palabra[erronea.pos];
      // Si es posible se construye un mensaje de salida
      if (esDefinido(erronea.letra)) {
        mensaje += `palabra: ${original.palabra} \t`
        mensaje += `letra Original: ${original.letra} \t`
        mensaje += `letra erronea: ${erronea.letra}\n`;      
      }
    }
    
    mostrarMensaje(mensaje, "erroresFrecuentes");
  }
}

/**********************************************************************
/*                      DIVIDE Y VENCERAS
/*********************************************************************/

function esDefinido(variable) {
  return (typeof variable != "undefined");
}

// Aquí posiblemente debio crearse una funcion para obtener los objetos (original, erronea)

/**********************************************************************
/*                      IMPLEMENTACION
/*********************************************************************/
var texto = document.getElementById('captureInput');
var textoEstatico = "hola soy el texto estatico de prueba";

/** 
/* Esta funcion permite extraer una palabra de un arreglo de caracteres, usando 
/* como base la posicion de un caracter dentro de la misma, ademas retorna informacion
/* sobre la posicion real de ese caracter en la palabra.
*/
function buscarPalabra(indice, texto) {
  for (var inicio = indice;
    (inicio > 0) && (texto[inicio] != ' '); inicio--);
  for (var fin = indice;
    (fin < texto.length) && (texto[fin] != ' '); fin++);
  inicio = (inicio > 0) ? inicio + 1 : inicio;
  return {
    pos: indice - inicio, //Posicion real del caracter
    palabra: Array.prototype.join.call(texto.slice(inicio, fin), '') //Palabra completa
  };
}

/** Solo reinicio el contenido de la caja en cada tipeo para mayor legibilidad */
function mostrarMensaje(mensaje, caja) {
  var contenedor = document.getElementById(caja);
  contenedor.innerHTML = mensaje;
}

/** Este evento tiene en cuenta cualquier cambio provocado por teclado o copia-pega del raton */
texto.addEventListener('input', function() {
  mostrarNoCoincidentes(this.value, textoEstatico);
});

// Ejemplo de funcionamiento al ejecutar el fragmento de codigo
texto.value = "hla soy el texto esatc";
mostrarNoCoincidentes(texto.value, textoEstatico);
<p>hola soy el texto estatico de prueba</p>
<textarea id="captureInput" placeholde="escribe aqui" autofocus></textarea>
<pre id="erroresFrecuentes" style="overflow-y: scroll; height:200px;"></pre>

Ahora debe quedar claro que aún tiene las limitaciones planteadas para la adición de nuevos caracteres, pero resuelve el inconveniente presentado para la tecla de retroceso al no depender de la posición tipeada, sino de la comparación completa de los términos en la oración.

Mejorando el detalle de la respuesta
Origen Enlace
NekoOs
  • 1.4k
  • 7
  • 19
/** FuncionFunción para contruirconstruir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    /* Obtienes el carácter y lo escapas en caso de que sea un caracter especial para expresiones regulares */
    var letracaracter = cadena[i];cadena[i].replace(/[()[\]{}\/\\^$*+?.|]/g, '\\$&');
    retorno.push(`(${letracaracter})?`);
  }
  returnvar newpatron RegExp(= retorno.join('')
  return new RegExp(patron, 'i');
}

/** FuncionFunción que verifica los carcterescaracteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var patron = crearPatron(texto);
  var hallado = criterio.match(patron);
  hallado.shift();
  for (var i=0; i<hallado.length; i++) {
    var letra = texto[i];
    if (hallado[i] != letra) {
      console.log(`Falta el caracter '${letra}' en la posicion ${i+1}`);
    }
  }
}

var texto = "hola soy el texto";texto.";
var criterio = "hla so el txto";

mostrarNoCoincidentes(criterio, texto);
/** Funcion para contruir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    var letra = cadena[i];
    retorno.push(`(${letra})?`);
  }
  return new RegExp(retorno.join(''), 'i');
}

/** Funcion que verifica los carcteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var patron = crearPatron(texto);
  var hallado = criterio.match(patron);
  hallado.shift();
  for (var i=0; i<hallado.length; i++) {
    var letra = texto[i];
    if (hallado[i] != letra) {
      console.log(`Falta el caracter '${letra}' en la posicion ${i+1}`);
    }
  }
}

var texto = "hola soy el texto";
var criterio = "hla so el txto";

mostrarNoCoincidentes(criterio, texto);
/** Función para construir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    /* Obtienes el carácter y lo escapas en caso de que sea un caracter especial para expresiones regulares */
    var caracter = cadena[i].replace(/[()[\]{}\/\\^$*+?.|]/g, '\\$&');
    retorno.push(`(${caracter})?`);
  }
  var patron = retorno.join('')
  return new RegExp(patron, 'i');
}

/** Función que verifica los caracteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var patron = crearPatron(texto);
  var hallado = criterio.match(patron);
  hallado.shift();
  for (var i=0; i<hallado.length; i++) {
    var letra = texto[i];
    if (hallado[i] != letra) {
      console.log(`Falta el caracter '${letra}' en la posicion ${i+1}`);
    }
  }
}

var texto = "hola soy el texto.";
var criterio = "hla so el txto";

mostrarNoCoincidentes(criterio, texto);
Origen Enlace
NekoOs
  • 1.4k
  • 7
  • 19

Bueno es algo ambiciosa tu función de corrección, imagino que tendrás que realizar un conjunto de validaciones como funciones independientes para al final obtener información mas precisa sobre el error, a continuación te presento una implementación que te puede ayudar en parte encontrando los caracteres inconsistentes, así:

texto estatico      texto escrito      caracteres error   posiciones error
hola soy el texto   hla soy el texto   o                  2
hola soy el texto   hla so e teto      o,y,l,x            2,8,11,15
hola soy el texto   ho oy el texto     l,a,s              3,4,6
hola soy el texto   hla soy el text    o,o                2,17

/** Funcion para contruir un patron facilmente */
function crearPatron(cadena) {
  var retorno = [];
  for (var i in cadena) {
    var letra = cadena[i];
    retorno.push(`(${letra})?`);
  }
  return new RegExp(retorno.join(''), 'i');
}

/** Funcion que verifica los carcteres faltantes */
function mostrarNoCoincidentes(criterio, texto) {
  var patron = crearPatron(texto);
  var hallado = criterio.match(patron);
  hallado.shift();
  for (var i=0; i<hallado.length; i++) {
    var letra = texto[i];
    if (hallado[i] != letra) {
      console.log(`Falta el caracter '${letra}' en la posicion ${i+1}`);
    }
  }
}

var texto = "hola soy el texto";
var criterio = "hla so el txto";

mostrarNoCoincidentes(criterio, texto);

supongo que solucionara parte de tu problema al menos al definir que caracteres faltan y en que posición debieron encontrarse, sin embargo fallara a la adición de nuevos caracteres por ejemplo

texto estático      texto escrito      
hola soy el texto   hila soy el texto // fallara puesto que la `i` no estaba contemplada.

Ahora espero que encuentres de utilidad el aporte y puedas anexarlo a la lista de validaciones de tu corrector.