javascript-lcs/example.html at master · sp4ce/javascript-lcs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="lcs.js"></script>
    <style type="text/css">
      #result { border: solid 1px black; border-collapse: collapse; min-width: 200px; margin-right: 20px;}
      #result td { border: solid 1px black; padding: 5px; }
	  .left { float: left; }
    </style>
  </head>
  <body>
    <h1>Javascript LCS error detection example</h1>
    <form>
      <label for="reference">reference</label>
      <input name="reference" type="text" value="012012012"/>
      <label for="input">input</label>
      <input name="input" type="text" value="0102012012"/>
      <input value="ok" type="button"/>
    </form>
    <div>
	  <div class="left">
        <h2>Result:</h2>
        <table id="result"></table>
	  </div>
	  <div class="left">
	    <h2>Message:</h2>
	    <div id="message"></div>
      </div>
    </div>
    <script type="text/javascript">
      $(function() {
        $('form input[type="button"]').click(function() {
          // Build the matrix.
          var reference = this.form.reference.value;
          var input = this.form.input.value;
          var result = lcs.compare(reference, input);

          // Get the line and the column of the matrix
          var line_count = result.length;
          var column_count = 0;
          result.forEach(function(line) { column_count = Math.max(line.length, column_count); });

          // Display the matrix: display the first line
          var table = $('#result').empty();
          var tr = $('<tr><td/></tr>').appendTo(table);
          for (var c in reference) {
            tr.append('<td>' + reference[c] + '</td>');
          }
          tr.append('<td/>');

          // Display the matrix: display the result
          for(var i = 0; i < line_count; i++) {
            var tr = $('<tr/>').appendTo(table);
            tr.append('<td>' + (input[i] || '') + '</td>');
            for(var j = 0; j < column_count; j++) {
              tr.append('<td>' + result[i][j].value + '</td>');
            }
          }

          // Highlight the path and display the messages
		  $('#message').empty();
          lcs.run(result, 0, 0, function(i, j) {
		    // Display the message.
		    if (result[i][j].status == lcs.DELETION) {
			  $('#message').append('<p>Missing a caracter at index ' + j + '.</p>');
            } else if (result[i][j].status == lcs.INSERTION) {
              $('#message').append('<p>Extra caracter at index ' + j + '.</p>');
            }

		    // Highlight the path
            $(table.find('tr').get(i + 1)).find('td').get(j + 1).style.setProperty('color', 'red');
          });
        });
      });
    </script>
  </body>
</html>