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.