7

Pretendo obtener los errores cometidos cuando se escribe un texto estático, en este caso (hola soy el texto estatico de prueba). Mi problema ocurre cuando se presiona retroceso/backspace, deja de funcionar.

Verifico si es espacio para así no afectar el error toda la oración sino sólo a la palabra. Ejemplo: hola como y escribo ola como, entonces estaría mal todo por que se recorre 1 posición toda la oración, sin embargo solo hay 1 error que es la h.

texto estatico         texto escrito       respuesta            resp actual 
hola soy el texto      hla soy el texto    error-> o -----l     error->ola---la

En el caso anterior solamente se equivocó el usuario en escribir la letra "o" pero su error influyó con toda la palabra. Para tratar de solucionar obtengo las posiciones de los inicios de las palabras con la función getPosiciones() eso para que el error producido, que en este caso sólo fue la letra o, no afecte a toda la oración; ahora afecta solamente a la palabra, pero igual esta mal, debería afectar a 1 letra y no a toda la palabra.

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) { //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>

4
  • Quizás debas detallar casos de usos, algunos ejemplos de los resultados que esperas mas o menos así: palabra_estatica="hola mundo", palabras_insertadas ("hola","la mun", "hola do") ¿Que esperarías obtener como respuesta para cada uso?
    – NekoOs
    el 30 jun. 2017 a las 4:37
  • 2
    @hubman Además, ¿oodrías dar un poco de feedback sobre las respuestas que recibiste? De esa forma se puede entender mejor tu objetivo y, tanto quienes respondieron como quienes leen las respuestas pueden ver tu objetivo e intentar brindar la mejor respuesta posible.
    – Mariano
    el 5 jul. 2017 a las 4:33
  • Sería bueno que además soporte tildes. "estático" en vez de "estatico".
    – user13558
    el 5 jul. 2017 a las 15:10
  • Ya tienes tres respuestas, sería bueno que comentaras que te parecen.
    – Rubén
    el 6 jul. 2017 a las 16:13

3 respuestas 3

6

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

/** 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);

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.


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.

7
  • 1
    Edité la solución para que escapase los caracteres especiales, supongo que solo quise orientar hacia una nueva propuesta sin entrar en ningún detalle técnico.
    – NekoOs
    el 2 jul. 2017 a las 14:31
  • +1 Tienes razón @Mariano intentaré tenerlo en cuenta
    – NekoOs
    el 2 jul. 2017 a las 14:37
  • Me parece muy bien que hayas presentado una alternativa al código de la pregunta, en especial la tabla de entradas y salidas, sin embargo, me parece que el código de la respuesta debería replicar la parte de entrada y salida, en específico, incluir un input y dar como resultado un mensaje con la misma estructura que el código del OP.
    – Rubén
    el 3 jul. 2017 a las 3:32
  • 1
    @Rubén, tienes razón en mencionar que solo es una propuesta desde una perspectiva diferente, puesto que no soluciona completamente la pregunta planteada, sin embargo se puede usar para fabricar una respuesta. En cuanto tenga un tiempo libre editare la respuesta anexando un POSDATA detallando como lo usaría yo para adaptarlo a la respuesta esperada. Solo espero tener tiempo libre...
    – NekoOs
    el 3 jul. 2017 a las 3:42
  • Bueno al parecer esta madrugada tuve un tiempo libre, así que me decidí a adaptar la solución teniendo en cuenta el resultado de la ejecución al fragmento de código publicado en la pregunta.
    – NekoOs
    el 3 jul. 2017 a las 7:33
2
+500

Esta solución encara el problema de una forma diferente.

En lugar de concentrarse en el caracter agregado, por cada caracter agregado se busca las diferencias en toda la frase buscando sincronizar lo mejor posible los dos textos de forma de no arrastrar errores.

Para hacer esto se basa el la forma en que funcionan los programas que comparan archivos de texto como Diff.

Dadas dos cadenas se utiliza una algoritmo para encontrar la secuencia mas larga de caracteres comunes y a partir de ahí comparar esa secuencia con las dos cadenas para detectar que caracteres fueron eliminados y que caracteres fueron agregados (mal tipeados).

Llevadolo al planteo que se quiere resolver aquí, cualquiera de los dos casos se trata de un error.

La ventaja de implementar esta solución es que un error al principio del texto solo será propagado hasta donde el texto se vuelve a sincronizar.

Y también se evita tener que hacer un análisis de cada tecla digitada y ocuparse de casos extremos (edge cases) porque lo que interesa es el texto completo directamente y hasta donde coincide con el texto original.

El nombre del algoritmo es "Longest Common Subsequence" (LCS) -Más larga subsecuencia comúm-.

Particularmente para la pregutna porté a javascript la implementación en Java que está en esta página.

En wikipedia también hay más información sobre como funciona el algoritmo.

EDICION 1

Me quedó un poco abajo la referencia de como entender la salida del programa así que lo agrego aquí:

"Los errores se marcan con un signo menos ("-") cuando faltan letras respecto del texto original, y con un signo más ("+") cuando se han agregado letras. La porción de texto agregado o quitado está entre corchetes ("[]")"

window.onkeyup = function(e){
    var elem = document.getElementById("textoEstaticoContainer");
    var s1 = elem.innerHTML;
    var et = document.getElementById("captureInput");
    var s2 = et.value;

    var ef = document.getElementById("erroresFrecuentes");
    ef.innerHTML = getDiff(s1,s2);
}

function lcs(string1, string2){
    var l1 = string1.length;
    var l2 = string2.length;

    intArr = new Array(l1 + 1);
    var i;
    var j;
    for(i=0; i<=l1; i++){
        intArr[i] = new Array(l2 + 1);
        for(j=0; j<=l2; j++){
            intArr[i][j] = 0;
        };
    };

    for(i = l1-1; i>=0; i--){
        for(j = l2-1; j>=0; j--){
            if(string1.charAt(i) == string2.charAt(j)){
                intArr[i][j] = intArr[i+1][j+1] + 1;
            }else{
                intArr[i][j] = Math.max(intArr[i+1][j], intArr[i][j+1]);
            };
        };
    };

    i=0;
    j=0;

    var lcsString = "";
    while(i < l1 && j < l2){
        if(string1.charAt(i) == string2.charAt(j)){
            lcsString += string1.charAt(i);
            i++;
            j++;
        }else if(intArr[i+1][j] >= intArr[i][j+1]){
            i++;
        }else{
            j++;
        }
    };
    return lcsString;
};

function getDiff(s1, s2){
    var res = lcs(s1,s2);
    var i;
    var j=0;
    var k = 0;
    var diff = "";
    for(i = 0; i<res.length;i++){
        var removed = "";
        var added = "";
        var common = res.charAt(i);
        while(s1.charAt(j) != common){
            removed += s1.charAt(j);
            j++;
        }
        if(removed.length > 0){
            diff = diff + "-[" + removed + "]";
        }
        while(s2.charAt(k) != common){
            added += s2.charAt(k);
            k++;
        }
        if(added.length > 0){
            diff = diff + "+[" + added + "]"
        }
        diff = diff + common;
        j++;
        k++;
    }
    removed = "";
    added = "";
    while(j<s1.length){
        removed += s1.charAt(j);
        j++;
    }
    if(removed.length > 0){
        diff = diff + "-[" + removed + "]";
    }
    while(k<s2.length){
        added += s2.charAt(k);
        k++;
    }
    if(added.length > 0){
        diff = diff + "+[" + added + "]"
    }
    return diff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<p id="textoEstaticoContainer">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>
<p>Los errores se marcan con un signo menos ("-") cuando faltan letras respecto
del texto original, y con un signo más ("+") cuando se han agregado letras.<br>
La porción de texto agregado o quitado está entre corchetes ("[]")</p>
</body>
</html>

EDICION 2

Respuesta al comentario:

... y algun otro algoritmo que ayude a solucionar??, desearia que el formato de la salida sea la parecida al de la pregunta

Es posible presentar una salida parecida a la de la pregunta bajando el nivel de comparación al nivel de palabras.

La salida sería diferente en que debe contemplar letras agregadas (1 o más), letras quitadas (1 o más), además de letras reemplazadas.

También hay que tomar una decisión de compromiso respecto de qué se compara con qué dado que las dos cadenas pueden tener diferente cantidad de palabras producto de omitir un espacio, tipear un espacio incorrecto dentro de una palabra válida, agregar palabras que no están en el texto original, u omitiendo palabras completas. A diferencia de los humanos la computadora no puede inferir por contexto si es un error o dos palabras o una palabra que se repitió dos veces.

Una forma puede ser seguir estas reglas:

  1. La frase original es el patrón y estipula la cantidad de palabras
  2. Dos cadenas separadas por espacio son palabras distintas.
  3. La comparación es posicional (Primera vs Primera, segunda vs segunda, etc).
  4. Si hay mas palabras en la cadena ingresada que en el patrón en la salida se denotan con signos de pregunta (???).
  5. Si hay menos palabras que en el patrón se entiende que todavía no se terminó de ingresar el resto del texto.

Entonces se podría dar este ejemplo:

Patrón: "hola soy el texto estatico de prueba"
Texto ingresado: "hlr soy l txto de de de prueba"

Compara: hola soy el texto estatico de prueba
Con: hlr soy l txto de de de prueba

Diferencias detectadas:

hola: h-[o]l-[a]+[r]
el: -[e]l
texto: t-[e]xto
estatico: +[d]e-[statico]
prueba: -[pru]+[d]e-[ba]
???: +[prueba]

Luego, las diferencias se pueden parsear o pasar por un autómata finito y tener una salida como:

palabra 'hola': falta/n la/s letra/s 'o', y se reemplazó/aron la/s letra/s 'a' por 'r'. palabra 'estatico': falta/n la/s letra/s 's','t','a','t','i','c','o', y se agregó/aron la/s letra/s 'd'.

La palabra ingresada 'prueba' quedó desfasada por eso se muestra como faltante con signos de pregunta.

EDICION 3

Para implementar las reglas que se mencionan en la EDICION 2, se modificó el programa para procesar palabra por palabra y también la salida de la función que genera la presentación de las diferencias para mostrarlas de este otro modo. No hizo falta parseo adiciona ni utilizar un autómata finito como se había propuesto.

Dejé la solución original y agregué la solución modificada abajo.

function getPalabras(linea){
    var arr = linea.split(" ");
    return arr;
}

window.onkeyup = function(e){
    var elem = document.getElementById("textoEstaticoContainer");
    var s1 = elem.innerHTML;
    var et = document.getElementById("captureInput");
    var s2 = et.value;

    s1Arr = getPalabras(s1);
    s2Arr = getPalabras(s2);

    var ef = document.getElementById("erroresFrecuentes");

    var i;
    var text="";
    for(i=0; i<s1Arr.length && i<s2Arr.length ; i++){
        if(i == s2Arr.length - 1){
            strLength = s2Arr[i].length;
            if(s1Arr[i].substr(0,strLength) != s2Arr[i].substr(0,strLength)){
                var diff = getDiff(s1Arr[i], s2Arr[i]);
                //text = text + s1Arr[i] + ": " + getDiffAsText(diff) + "<br>";
                text = text + s1Arr[i] + ": " + diff + "<br>";
            }
        }else{
          strLength = s2Arr[i].length;
          if(strLength != s1Arr[i].length || s1Arr[i].substr(0,strLength) != s2Arr[i].substr(0,strLength)){
            var diff = getDiff(s1Arr[i], s2Arr[i]);
            //ext = text + s1Arr[i] + ": " + getDiffAsText(diff) + "<br>";
            text = text + s1Arr[i] + ": " + diff + "<br>";
          }
        }
    }
    for(i=s1Arr.length; i<s2Arr.length; i++ ){
        var diff = getDiff("", s2Arr[i]);
        //text = text + "???" + ": " + getDiffAsText(diff) + "<br>";
        text = text + "???" + ": " + diff + "<br>";
    }
    ef.innerHTML = text;
}

//Retorna la cadena de caracteres comunes mas larga entre dos cadenas
function lcs(string1, string2){
    var l1 = string1.length;
    var l2 = string2.length;

    intArr = new Array(l1 + 1);
    var i;
    var j;
    for(i=0; i<=l1; i++){
        intArr[i] = new Array(l2 + 1);
        for(j=0; j<=l2; j++){
            intArr[i][j] = 0;
        };
    };

    for(i = l1-1; i>=0; i--){
        for(j = l2-1; j>=0; j--){
            if(string1.charAt(i) == string2.charAt(j)){
                intArr[i][j] = intArr[i+1][j+1] + 1;
            }else{
                intArr[i][j] = Math.max(intArr[i+1][j], intArr[i][j+1]);
            };
        };
    };

    i=0;
    j=0;

    var lcsString = "";
    while(i < l1 && j < l2){
        if(string1.charAt(i) == string2.charAt(j)){
            lcsString += string1.charAt(i);
            i++;
            j++;
        }else if(intArr[i+1][j] >= intArr[i][j+1]){
            i++;
        }else{
            j++;
        }
    };
    return lcsString;
};


// Retorna la diferencia entre dos cadenas indicando los
// caracteres tanto agregados como faltantes entre corchetes
// precedidos por un signo menos (-) en el caso de los faltantes
// y más (+) en el caso de los agregados.
function getDiff(s1, s2){
    var res = lcs(s1,s2);
    var i;
    var j=0;
    var k = 0;
    var diff = "";
    var allReplaced = "";
    var allReplacedBy = "";
    var allRemoved = "";
    var allAdded = "";
    for(i = 0; i<res.length;i++){
        var removed = "";
        var added = "";
        var common = res.charAt(i);
        while(s1.charAt(j) != common){
            removed = removed == "" ? s1.charAt(j) : removed + "," + s1.charAt(j);
            j++;
        }
        while(s2.charAt(k) != common){
            added = added == "" ? s2.charAt(k) : added + "," + s2.charAt(k);
            k++;
        }
        if(removed.length > 0 && added.length > 0){
            allReplaced = allReplaced == "" ? removed : allRelplaced + "," + removed;
            allReplacedBy = allReplacedBy == "" ? added : allReplacedBy + "," + added;
        }else if(removed.length > 0){
            //diff = diff + "-[" + removed + "]";
            allRemoved = allRemoved == "" ? removed : allRemoved + "," + removed;
        }else if(added.length > 0){
            allAdded = allAdded == "" ? added : allAdded + "," + added;
        }

        j++;
        k++;
    }
    removed = "";
    added = "";
    while(j<s1.length){
        removed = removed == "" ? s1.charAt(j) : removed + "," + s1.charAt(j);
        j++;
    }
    while(k<s2.length){
        added = added == "" ? s2.charAt(k) : added + "," + s2.charAt(k);
        k++;
    }
    if(removed.length > 0 && added.length > 0){
        allReplaced = allReplaced == "" ? removed : allRelplaced + "," + removed;
        allReplacedBy = allReplacedBy == "" ? added : allReplacedBy + "," + added;
    }else if(removed.length > 0){
        //diff = diff + "-[" + removed + "]";
        allRemoved = allRemoved == "" ? removed : allRemoved + "," + removed;
    }else if(added.length > 0){
        allAdded = allAdded == "" ? added : allAdded + "," + added;
    }

    if(allRemoved.length > 0){
      diff = "Se ha/n quitado: " + allRemoved;
    }
    if(allAdded.length > 0){
      diff = diff == "" ? "Se ha/n agregado: " : diff + ", y se ha/n agregado: ";
      diff += allAdded;
    }
    if(allReplaced.length > 0){
      diff = diff == "" ? "Se ha/n reemplazado: " : diff + ", y se ha/n reemplazado: ";
      diff += allReplaced;
      diff += " por: " + allReplacedBy;
    }

    return diff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<p id="textoEstaticoContainer">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>
</body>
</html>

9
  • Esta respuesta no responde la pregunta ya que no trata sobre propuestas sobre cómo satisfacer un requerimiento, sino que en concreto pregunta la razón por la que no funciona al presionar retroceso/backspace. Si bien es válido dar alternativas, antes debe responderse la pregunta. Cabe mencionar que cada respuesta debe ser "auto-contenida", lo cual significa que si se va a hacer referencia a material de otros, incluyendo otras respuestas, debe incluirse la parte más relevantes, por si acaso son eliminadas.
    – Rubén
    el 6 jul. 2017 a las 16:06
  • @Rubén, si lees bien la pregunta vas a ver que no es así. La pregunta comienza: "Pretendo obtener los errores cometidos cuando se escribe un texto estático, en este caso (hola soy el texto estatico de prueba). " y manifiesta un problema con el backspace. También manifiesta problemas con la propagación de errores en la frase. Esta respuesta plantea una solución que satisface la detección de errores y no tiene los problemas de propagación dado que sincroniza los textos, ni problemas con el backspace.
    – Juan
    el 6 jul. 2017 a las 16:36
  • 1
    De todas las respuestas presentadas esta es la que mejor funciona cuando se pulsa retroceso(backspace). O cuando se comente cualquier otro error. A veces es posible solucionar un problema con un pequeño cambio y a veces, como parece ser el caso, hace falta un cambio grande como el que se plantea en esta respuesta. el 6 jul. 2017 a las 17:21
  • @Juan en realidad esta respuesta estaba buscando!!! lo testeare, y algun otro algoritmo que ayude a solucionar??, desearia que el formato de la salida sea la parecida al de la pregunta
    – hubman
    el 7 jul. 2017 a las 1:28
  • Incorporé a la respuesta la complejidad de la solución para una salida como la de la pregunta y una alternativa de como se puede hacer. Fijate si estas de acuerdo o si lo ves de otra forma.
    – Juan
    el 7 jul. 2017 a las 15:30
2

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, el valor de index ya no coincide para el resto de los caracteres de la palabra. La forma de solucionar esto es sumar uno al valor de index (index +=1;) cuando se haya omitido un caracter. Una forma de hacerlo es agregando el bloque else inclueyendo lo siguiente al enunciado if de la función esLaMisma:

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

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 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>

7
  • solo me muestra el error de la palabra texto el 5 jul. 2017 a las 3:04
  • @PedroMiguelPimientaMorales gracias por el aviso... cuando lo probé me funcionaba, tal vez en la edición para corregir errores de tecleo "descompuse" algo
    – Rubén
    el 5 jul. 2017 a las 3:06
  • dale, que quiero ver la solución el 5 jul. 2017 a las 3:08
  • @PedroMiguelPimientaMorales: Al parecer fue que es -=1 en lugar de +=1. ¿Podrías probar?
    – Rubén
    el 5 jul. 2017 a las 3:09
  • 1
    No se diga mas, entonces le hare la recomendacion a @hubman el 5 jul. 2017 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.