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

Textarea A

Textarea B

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

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

結果:Aの重複行:

結果:Bの重複行:

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);
}

//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;

}

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廃止等で動かないページもあります。