Skip to main content
2 de 4
se añadieron 531 caracteres en el cuerpo; se añadieron 85 caracteres en el cuerpo
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Importante: De acuerdo a KeyboardEvent.keyCode, keyCode ha sido retirado de los estándares web por lo que recomienda evitar su uso cuando sea posible. En KeyboardEvent se recomienda usar key cuando esté disponible.

El problema se debe a cuando se omite un caracter index ya no coincide para el resto de los caracteres de la palabra. La forma de solucionar esto es sumar uno a index (index +=1;) cuando se haya omitido un caracter. Una forma de hacerlo es agregando lo siguiente a la función esLaMisma

 /* Inicia fragmento nuevo*/ 
  else {
    if(key_id == texto.charAt(i + 1)) {
      index += 1;
      res = true;
    }
  } 
  /* Termina fragmento nuevo*/ 
  return res;

Poniendo lo anterior en el código, quedaría de la siguiente forma:

Nota: No se ha reemplazado keyCode por key, porque ello es tema para otra pregunta.

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 fragrmento nuevo*/ 
  else {
    if(key_id == texto.charAt(i + 1)) {
      index += 1;
      res = true;
    }
  } 
  /* Termina fragrmento 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>

Rubén
  • 11.5k
  • 7
  • 41
  • 85