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;
}
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) { //backspaceespacio
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>