sylph01/array_merge.html

## array_merge.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 list3_arr = list1_arr_uniq.concat(list2_arr_uniq);

      var list3_arr_uniq    = array_uniq(list3_arr);
      var list3_arr_nonuniq = array_nonuniq(list3_arr);

      array_info += "Array length of result: " + list3_arr.length + "<br />";
      array_info += "<br />";

      array_info += "Non-unique elements in result(" + list3_arr_nonuniq.length + "): <br />";
      for (var i = 0; i < list3_arr_nonuniq.length; i++) {
        array_info += list3_arr_nonuniq[i] + "<br />";
      }
      $('#list3').val(list3_arr_uniq.join('\n'));
      $('#array_info').html(array_info);
    });
  });
  </script>
  <style type="text/css">
    .container {
      float: left;
      width: 280px;
      margin: 0;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Add 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 list3_arr = list1_arr_uniq.concat(list2_arr_uniq);

	var list3_arr_uniq = array_uniq(list3_arr);
	var list3_arr_nonuniq = array_nonuniq(list3_arr);

	array_info += "Array length of result: " + list3_arr.length + "<br />";
	array_info += "<br />";

	array_info += "Non-unique elements in result(" + list3_arr_nonuniq.length + "): <br />";
	for (var i = 0; i < list3_arr_nonuniq.length; i++) {
	array_info += list3_arr_nonuniq[i] + "<br />";
	}
	$('#list3').val(list3_arr_uniq.join('\n'));
	$('#array_info').html(array_info);
	});
	});
	</script>
	<style type="text/css">
	.container {
	float: left;
	width: 280px;
	margin: 0;
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Add 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>