Calculate row difference as range

I am trying to figure out what characters the user changed in a string. Fortunately, I can only imagine one subsequent block of changes.

I was not even able to find the place where the area was changed:

var originalVal, val; //strings
//The ranges
var original = [0,0];
var new_rang = [0,0];
//Old length, new length
var ol = originalVal.length;
var nl = val.length;
//Find where the change begins (that should be the same for both arrays)

for(var i=0; ; i++) {
  //If end of string was reached or the strings are different
  if((i>=ol||i>=nl) || originalVal[i]!=val[i]) {
    original[0] = new_rang[0] = i;
    //Set these to i too, assuming there was no change
    original[1] = new_rang[1] = i;
    break;
  }
}  

This completely breaks if a string of identical characters and the user deletes one of them:

mmmmx
mMDEL> MMX
TTT x

Script will say that the change occurred at 4, where it xmoved. But in fact it is not even possible to say which has been deleted m .

However, I can tell where the cursor position was at the beginning and where it is at the end. This way, it looks more promising, but I still don't know what to do:

mm | Mmx
m > | MMX
| MMX

, m . , .

+4
1

, . , .

var Console = function() {
  this.log = function(msg) {
    debug(msg)
  };
};
var console = new Console();

function diffLengths(longer, shorter) {
  var indexes = [];
  var isTheSame = true;
  for (var i = 0; i < shorter.length; i++) {
    if (shorter[i] != longer[i]) {
      isTheSame = false;
      indexes.push(i);
    }
  };
  if (isTheSame) {
    // The shorter string is exactly the same as the longer string
    // except for the extra characters in the longer string
    indexes.push(shorter.length);
  }
  return indexes;
}

function getDiffRange(first_string, second_string) {
  var indexes = [];
  if (first_string.length > second_string.length) {
    return diffLengths(first_string, second_string);
  } else if (first_string.length < second_string.length) {
    return diffLengths(second_string, first_string);
  } else {
    for (var i = 0; i < first_string.length; i++) {
      if (second_string[i] != first_string[i]) {
        indexes.push(i);
      }
    };
  }
  return indexes;
}

var range = getDiffRange('mmmmx', 'mmmx');
document.getElementById('result-1').innerHTML = range[0] + " - " + range[range.length - 1];

var range = getDiffRange('mmmmx', 'mmmxc');
document.getElementById('result-2').innerHTML = range[0] + " - " + range[range.length - 1];

var range = getDiffRange('mm', 'mmx');
document.getElementById('result-3').innerHTML = range[0] + " - " + range[range.length - 1];
table, th, td {
	border-collapse: collapse;
	border: 1px solid #ddd;
	text-align: left;
	padding: 7px;
}
<html>

<body>
  <table>
    <tr>
      <th>input</th>
      <th>result</th>
    </tr>
    <tr>
      <td>'mmmmx', 'mmmx':</td>
      <td id='result-1'></td>
    </tr>
    <tr>
      <td>'mmmmx','mmmxc':</td>
      <td id='result-2'></td>
    </tr>
    <tr>
      <td>'mm','mmx':</td>
      <td id='result-3'></td>
    </tr>
  </table>
</body>

</html>
Hide result
+1

All Articles