var texto = document.getElementById('captureInput');
var index = 0;
var errores = [];
var textoEstatico = "hola soy el texto estatico de prueba";
var posiciones = [];
var indexActual = 0;
var flagDoubleEspacio = false;
function is_special_key(key_id) {
var tecladoEspecial = [8, 9, 13, 17, 18, 19, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 145];
if (tecladoEspecial.indexOf(key_id) == 0) {
return true;
}
return false;
}
function esLaMisma(key_id, texto, i) {
var res = false;
if (key_id == texto.charAt(i)) {
res = true;
}
/* Inicia fragmento nuevo*/
else {
if(key_id == texto.charAt(i + 1)) {
index +=-= 1;
res = true;
}
}
/* Termina fragmento nuevo*/
return res;
}
function posicionPalabras(texto, done) {
var posiciones = [];
var ini, fin, cp, tamPalabras = 0;
ini = fin = 0, cp = 0;
var copiaEstatica, palabra = "";
var arrayEstatico = textoEstatico.split(" ");
var arregloPosiciones = []
for (var i = 0; i < arrayEstatico.length; i++) {
tamPalabras = arrayEstatico[i].length - 1;
if (fin == 0) {
fin = fin + tamPalabras + 1;
} else {
fin = fin + tamPalabras + 2;
}
var auxPos = {
ini,
fin
};
palabra = arrayEstatico[i];
arregloPosiciones.push({
palabra: palabra,
posiciones: auxPos
});
ini = fin + 1;
};
return done(null, arregloPosiciones);
}
function buscarPalabra(mapeo, indice, done) {
getPosiciones();
var intervalIni = 0,
intervalFin = 0;
mapeo.forEach(function(current, index, verdadero) {
intervalIni = current.posiciones.ini;
intervalFin = current.posiciones.fin;
if (indice >= intervalIni && indice <= intervalFin) {
return done(null, current.palabra)
}
})
}
texto.addEventListener('keydown', function(keyboardEvent) {
if (!is_special_key(keyboardEvent.keyCode)) {
flagDoubleEspacio = true;
let keyC = keyboardEvent.key;
if ((!esLaMisma(keyC, textoEstatico, index))) {
arregloPosiciones = posicionPalabras(textoEstatico, function(err, result) {
buscarPalabra(result, index, function(err, res) {
let simbol = textoEstatico.charAt(index);
let mensaje = 'palabra: ' + res + ' \tletra Original: ' + simbol + ' \tletra erronea: ' + keyC;
mostrarMensaje(mensaje, "erroresFrecuentes");
errores.push({
palabra: res,
posiciones: {
simbol,
keyC
}
});
});
});
}
} else {
if (keyboardEvent.keyCode == 8) { //backspace
index -= 2;
}
}
if (keyboardEvent.keyCode == 32) { //espacio
if (flagDoubleEspacio) {
index = posiciones[indexActual];
indexActual++;
flagDoubleEspacio = false;
}
} else {
index++;
}
});
function mostrarMensaje(mensaje, caja) {
var contenedor = document.getElementById(caja);
var res = contenedor.innerText.split('\n');
res.push(mensaje);
contenedor.innerText = res.join('\n');
contenedor.scrollTop = contenedor.scrollHeight - contenedor.clientHeight;
}
function getPosiciones() {
for (var i = 0; i <= textoEstatico.length - 1; i++) {
if (textoEstatico.charAt(i) == " ") {
posiciones.push(i + 1);
}
}
}
<p>hola soy el texto estatico de prueba</p>
<textarea id="captureInput" placeholde="escribe aqui"></textarea>
<pre id="erroresFrecuentes" style="overflow-y: scroll; height:200px;"></pre>