title: detect differences between two strings with Javascript
body: <p>With Javascript, I want to check how many differences there are between two strings. </p>
  
  <p>Something like:</p>
  
  <pre><code>var oldName = "Alec";
  var newName = "Alexander";
  var differences = getDifference(oldName, newName) // differences = 6
  </code></pre>
  
  <ul>
  <li>Any letters added to the name should count as one change per letter.</li>
  <li>Changing a letter should count as a change per letter. Swaping two</li>
  <li>letters should count as two changes as your really changing each<br>
  leter.</li>
  <li><strong>However, shifting a letter and inserting another should only count as one change.</strong></li>
  </ul>
  
  <p>For example:</p>
  
  <p>Changing "Alex" to "Alexander" would be 5 changes as 5 letters have been added</p>
  
  <p>Changing "Alex" to "Allex" would only be one change as you added an  "l" and shifted the rest over but didnt change them</p>
  
  <p>Changing "Alexander" to "Allesander"would be 2 changes (adding the "l" and changing "x" to a "s").</p>
  
  <p>I can split each name into an array of letters and compare them easy enough like in this <a href="http://jsfiddle.net/DelightedD0D/SWX77/" rel="nofollow noreferrer">jsFiddle</a> with the below function:</p>
  
  <pre><code>function compareNames(){
      var oldName = $('#old').val().split("");
      var newName = $('#new').val().split("");
      var changeCount = 0;
      var testLength = 0;
      if(oldName.length &gt; newName.length){
          testLength=oldName.length;    
      }
      else testLength=newName.length;
      for(var i=0;i&lt;testLength;i++){
          if(oldName[i]!=newName[i]) {
             changeCount++;           
          }
      }
      alert(changeCount);
  }
  </code></pre>
  
  <p><strong>But how can I account for the shifting of letters not counting as a change?</strong></p>
  
  <hr>
  
  <p><strong>Update: Here's how I got it working</strong> </p>
  
  <p><strong><em>Levenshtein distance</em></strong> was exactly what I needed. Thanks to Peter! </p>
  
  <p><a href="http://jsfiddle.net/DelightedD0D/SWX77/39/" rel="nofollow noreferrer">Working jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#compare').click(function () {
          var oldName = $('.compare:eq(0)').val();
          var newName = $('.compare:eq(1)').val();
          var count = levDist(oldName, newName);
          $('#display').html('There are ' + count + ' differences present');
      });
  });
  
  function levDist(s, t) {
      var d = []; //2d matrix
  
      // Step 1
      var n = s.length;
      var m = t.length;
  
      if (n == 0) return m;
      if (m == 0) return n;
  
      //Create an array of arrays in javascript (a descending loop is quicker)
      for (var i = n; i &gt;= 0; i--) d[i] = [];
  
      // Step 2
      for (var i = n; i &gt;= 0; i--) d[i][0] = i;
      for (var j = m; j &gt;= 0; j--) d[0][j] = j;
  
      // Step 3
      for (var i = 1; i &lt;= n; i++) {
          var s_i = s.charAt(i - 1);
  
          // Step 4
          for (var j = 1; j &lt;= m; j++) {
  
              //Check the jagged ld total so far
              if (i == j &amp;&amp; d[i][j] &gt; 4) return n;
  
              var t_j = t.charAt(j - 1);
              var cost = (s_i == t_j) ? 0 : 1; // Step 5
  
              //Calculate the minimum
              var mi = d[i - 1][j] + 1;
              var b = d[i][j - 1] + 1;
              var c = d[i - 1][j - 1] + cost;
  
              if (b &lt; mi) mi = b;
              if (c &lt; mi) mi = c;
  
              d[i][j] = mi; // Step 6
  
              //Damerau transposition
              if (i &gt; 1 &amp;&amp; j &gt; 1 &amp;&amp; s_i == t.charAt(j - 2) &amp;&amp; s.charAt(i - 2) == t_j) {
                  d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + cost);
              }
          }
      }
      // Step 7
      return d[n][m];
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="button" id="compare" value="Compare" /&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="text" id="old" class="compare" value="Alec" /&gt;
  &lt;input type="text" id="new" class="compare" value="Alexander" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;span id="display"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Credit to James Westgate for the function:</p>
  
  <p><a href="https://stackoverflow.com/a/11958496/1376624">Jame's post showing this function</a></p>