sylph01/array_subtract.html

## array_subtract.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
  <script
  src="https://code.jquery.com/jquery-1.12.0.min.js"
  integrity="sha256-Xxq2X+KtazgaGuA2cWR1v3jJsuMJUozyIXDB3e793L8="
  crossorigin="anonymous"></script>
  <script type="text/javascript">
  function array_uniq(array) {
    return array.filter(function (x, i, self) {
      return self.indexOf(x) === i
    });
  }

  function array_nonuniq(array) {
    return array.filter(function (x, i, self) {
      return self.indexOf(x) === i && i !== self.lastIndexOf(x);
    });
  }

  $(function(){
    $('#button').click(function(){
      var list1 = $('#list1').val();
      var list1_arr = list1.split('\n');
      var list2 = $('#list2').val();
      var list2_arr = list2.split('\n');
      var list1_arr_uniq    = array_uniq(list1_arr);
      var list2_arr_uniq    = array_uniq(list2_arr);
      var list1_arr_nonuniq = array_nonuniq(list1_arr);
      var list2_arr_nonuniq = array_nonuniq(list2_arr);

      var array_info = "";
      array_info += "Array length of master: " + list1_arr.length + "<br />";
      array_info += "Array length of child: " + list2_arr.length + "<br />";
      array_info += "Array length of master (after unique filter): " + list1_arr_uniq.length + "<br />";
      array_info += "Array length of child (after unique filter): " + list2_arr_uniq.length + "<br />";
      array_info += "<br />";

      array_info += "Non-unique elements in master(" + list1_arr_nonuniq.length + "): <br />";
      for (var i = 0; i < list1_arr_nonuniq.length; i++) {
        array_info += list1_arr_nonuniq[i] + "<br />";
      }
      array_info += "<br />";
      array_info += "Non-unique elements in child(" + list2_arr_nonuniq.length + "): <br />";
      for (var i = 0; i < list2_arr_nonuniq.length; i++) {
        array_info += list2_arr_nonuniq[i] + "<br />";
      }
      array_info += "<br />";

      var subtracted = list1_arr_uniq.filter(function (x, i, self) {
        return list2_arr_uniq.indexOf(x) < 0;
      });
      var not_included = list2_arr_uniq.filter(function (x, i, self) {
        return list1_arr_uniq.indexOf(x) < 0;
      });

      $('#list3').val(subtracted.join('\n'));
      array_info += "Array length of result: " + subtracted.length + "<br />";
      array_info += "<br />";

      array_info += "Not included (" + not_included.length + "): <br />";
      for (var i = 0; i < not_included.length; i++) {
        array_info += not_included[i] + "<br />";
      }
      $('#array_info').html(array_info);
    });
  });
  </script>
  <style type="text/css">
    .container {
      float: left;
      width: 280px;
      margin: 0;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Subtract List</h1>
  <div class="container">
    <h3>Master List</h3>
    <textarea id="list1" rows="20" cols="25"></textarea><br />
    <h3>Child List</h3>
    <textarea id="list2" rows="20" cols="25"></textarea><br />
    <input type="button" value="Submit" id="button" />
  </div>
  <div class="container">
    <h3>Result List</h3>
    <textarea id="list3" rows="20" cols="25"></textarea>
  </div>
  <div class="container">
    <h3>Array Info</h3>
    <div id="array_info"></div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	<script
	src="https://code.jquery.com/jquery-1.12.0.min.js"
	integrity="sha256-Xxq2X+KtazgaGuA2cWR1v3jJsuMJUozyIXDB3e793L8="
	crossorigin="anonymous"></script>
	<script type="text/javascript">
	function array_uniq(array) {
	return array.filter(function (x, i, self) {
	return self.indexOf(x) === i
	});
	}

	function array_nonuniq(array) {
	return array.filter(function (x, i, self) {
	return self.indexOf(x) === i && i !== self.lastIndexOf(x);
	});
	}

	$(function(){
	$('#button').click(function(){
	var list1 = $('#list1').val();
	var list1_arr = list1.split('\n');
	var list2 = $('#list2').val();
	var list2_arr = list2.split('\n');
	var list1_arr_uniq = array_uniq(list1_arr);
	var list2_arr_uniq = array_uniq(list2_arr);
	var list1_arr_nonuniq = array_nonuniq(list1_arr);
	var list2_arr_nonuniq = array_nonuniq(list2_arr);

	var array_info = "";
	array_info += "Array length of master: " + list1_arr.length + "<br />";
	array_info += "Array length of child: " + list2_arr.length + "<br />";
	array_info += "Array length of master (after unique filter): " + list1_arr_uniq.length + "<br />";
	array_info += "Array length of child (after unique filter): " + list2_arr_uniq.length + "<br />";
	array_info += "<br />";

	array_info += "Non-unique elements in master(" + list1_arr_nonuniq.length + "): <br />";
	for (var i = 0; i < list1_arr_nonuniq.length; i++) {
	array_info += list1_arr_nonuniq[i] + "<br />";
	}
	array_info += "<br />";
	array_info += "Non-unique elements in child(" + list2_arr_nonuniq.length + "): <br />";
	for (var i = 0; i < list2_arr_nonuniq.length; i++) {
	array_info += list2_arr_nonuniq[i] + "<br />";
	}
	array_info += "<br />";

	var subtracted = list1_arr_uniq.filter(function (x, i, self) {
	return list2_arr_uniq.indexOf(x) < 0;
	});
	var not_included = list2_arr_uniq.filter(function (x, i, self) {
	return list1_arr_uniq.indexOf(x) < 0;
	});

	$('#list3').val(subtracted.join('\n'));
	array_info += "Array length of result: " + subtracted.length + "<br />";
	array_info += "<br />";

	array_info += "Not included (" + not_included.length + "): <br />";
	for (var i = 0; i < not_included.length; i++) {
	array_info += not_included[i] + "<br />";
	}
	$('#array_info').html(array_info);
	});
	});
	</script>
	<style type="text/css">
	.container {
	float: left;
	width: 280px;
	margin: 0;
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Subtract List</h1>
	<div class="container">
	<h3>Master List</h3>
	<textarea id="list1" rows="20" cols="25"></textarea><br />
	<h3>Child List</h3>
	<textarea id="list2" rows="20" cols="25"></textarea><br />
	<input type="button" value="Submit" id="button" />
	</div>
	<div class="container">
	<h3>Result List</h3>
	<textarea id="list3" rows="20" cols="25"></textarea>
	</div>
	<div class="container">
	<h3>Array Info</h3>
	<div id="array_info"></div>
	</div>
	</body>
	</html>