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:
- La frase original es el patrón y estipula la cantidad de palabras
- Dos cadenas separadas por espacio son palabras distintas.
- La comparación es posicional (Primera vs Primera, segunda vs
segunda, etc).
- Si hay mas palabras en la cadena ingresada que en el patrón en la
salida se denotan con signos de pregunta (???).
- 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>