Textarea比較 行単位の値の有無を確認する

Textarea A

Textarea B

結果:AにあるけどBにない行:

結果:BにあるけどAにない行:

結果:Aの重複行:

結果:Bの重複行:

結果:Aの重複を除いたユニーク行:

結果:Bの重複を除いたユニーク行:

Textareaから配列を取得

view source

JavaScript

//Textareaから配列を取得
function getArrByTextarea(id) {
  return document.getElementById(id).value
    .split('\n')
    .map(line => line.trim())
    .filter(line => line !== "");
}

//重複行を確認
//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();

  for (const item of arr) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }
  return Array.from(duplicates);
}

// 重複していないユニークな行だけを抽出
/*
function findUniqueLines(arr) {
  const countMap = new Map();
  arr.forEach(item => {
    countMap.set(item, (countMap.get(item) || 0) + 1);
  });

  return Array.from(countMap)
              .filter(([_, count]) => count === 1)
              .map(([item, _]) => item);
}
*/

function findUniqueLines(arr) {
  return [...new Set(arr)];
}

//AにあってBにない行を確認
function checkPresenceRow(lineA,lineB) {
  let result = '';
  lineA.forEach(line => {
    if (!lineB.includes(line)) {
      result += line +"\n";
    }
  });
  return result;
}

function compareTextareas() {
  const aLines = getArrByTextarea('textareaA');
  const bLines = getArrByTextarea('textareaB');

  const resultA = checkPresenceRow(aLines, bLines);
  const resultB =  checkPresenceRow(bLines, aLines);
  document.getElementById('resultA').value = resultA;
  document.getElementById('resultB').value = resultB;


  const resultDuplicatesA = findDuplicates(aLines).join("\n");
  const resultDuplicatesB = findDuplicates(bLines).join("\n");
  document.getElementById('resultDuplicatesA').value = resultDuplicatesA;
  document.getElementById('resultDuplicatesB').value = resultDuplicatesB;

  const uniqueA = findUniqueLines(aLines).join("\n");
  const uniqueB = findUniqueLines(bLines).join("\n");
  document.getElementById('resultUniqueA').value = uniqueA;
  document.getElementById('resultUniqueB').value = uniqueB;

}

CSS

.textarea-container {
  display: flex;
}

.textarea,
textarea {
  width: 99%;
  height: 320px;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-line-compare/

ABOUT

hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

仕様変更、API廃止等、実験途中で動かないページもあります。