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>
<script>
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;
}
</script>
</body>
</html>
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>