Reactで、貼り付けた一覧から重複した行を取り除く方法

const unique = [...new Set(text.split('\n'))];

// 貼り付けた一覧から、重複した行を取り除く関数

export type DedupeOptions = {
  trim: boolean; // 行の前後の空白を無視して比べる
  ignoreCase: boolean; // 英字の大文字と小文字を区別しない
  normalizeWidth: boolean; // 全角と半角の違いを無視する（NFKC）
  dropEmpty: boolean; // 空の行（空白だけの行も含む）を取り除く
};

export type DedupeResult = {
  lines: string[]; // 残した行。最初に出てきた行を残す（前後の空白を無視するときは、空白を除いて残す）
  duplicates: { line: string; count: number }[]; // 2回以上出てきた行と、その回数
  total: number; // 元の行数
};

// \r\n（Windows）、\r、\n のどれでも1行に分ける。末尾の改行のあとの空の1行は数えない
export function splitLines(text: string): string[] {
  if (text === '') return [];
  const lines = text.split(/\r\n|\r|\n/);
  if (lines.at(-1) === '') lines.pop();
  return lines;
}

// 比べるときに使う文字列。全角と半角、大文字と小文字は、ここでだけそろえる
function toKey(line: string, options: DedupeOptions): string {
  let key = line;
  if (options.normalizeWidth) key = key.normalize('NFKC');
  if (options.ignoreCase) key = key.toLowerCase();
  return key;
}

export function dedupeLines(text: string, options: DedupeOptions): DedupeResult {
  const all = splitLines(text);
  const seen = new Map<string, { line: string; count: number }>();
  const lines: string[] = [];
  for (const raw of all) {
    const line = options.trim ? raw.trim() : raw;
    if (options.dropEmpty && line.trim() === '') continue;
    const key = toKey(line, options);
    const found = seen.get(key);
    if (found) {
      found.count += 1;
      continue;
    }
    seen.set(key, { line, count: 1 });
    lines.push(line);
  }
  const duplicates = [...seen.values()].filter((v) => v.count > 1);
  return { lines, duplicates, total: all.length };
}

{"lines":["Apple","みかん","ぶどう"],"duplicates":[{"line":"Apple","count":4},{"line":"みかん","count":2}],"total":8}

import { useId, useMemo, useState } from 'react';
import { dedupeLines, type DedupeOptions } from './dedupeLines';

const optionLabels: [keyof DedupeOptions, string][] = [
  ['trim', '前後の空白を無視する'],
  ['ignoreCase', '大文字と小文字を区別しない'],
  ['normalizeWidth', '全角と半角を区別しない'],
  ['dropEmpty', '空の行を取り除く'],
];

export function LineDeduper({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  const [options, setOptions] = useState<DedupeOptions>({
    trim: true,
    ignoreCase: false,
    normalizeWidth: false,
    dropEmpty: true,
  });
  // 最後にコピーした文字列。結果が変わったら「コピーしました」を消すために、中身で比べる
  const [copied, setCopied] = useState<string | null>(null);

  // 何万行も貼り付けたとき、ほかの state が変わるたびに数え直さないようにする
  const result = useMemo(() => dedupeLines(text, options), [text, options]);
  const output = result.lines.join('\n');
  const removedCount = result.total - result.lines.length;

  async function copy() {
    await navigator.clipboard.writeText(output);
    setCopied(output);
  }

  return (
    <div className="deduper">
      <label htmlFor={`${id}-input`}>一覧（1行に1つ）</label>
      <textarea id={`${id}-input`} rows={8} value={text} onChange={(e) => setText(e.target.value)} />
      <fieldset>
        <legend>比べ方</legend>
        {optionLabels.map(([key, label]) => (
          <label key={key}>
            <input
              type="checkbox"
              checked={options[key]}
              onChange={(e) => setOptions({ ...options, [key]: e.target.checked })}
            />
            {label}
          </label>
        ))}
      </fieldset>
      <p aria-live="polite">
        {result.total}行 → {result.lines.length}行（{removedCount}行を取り除きました）
      </p>
      <label htmlFor={`${id}-output`}>重複を取り除いた一覧</label>
      <textarea id={`${id}-output`} rows={8} value={output} readOnly />
      <button type="button" onClick={copy} disabled={output === ''}>
        {copied === output ? 'コピーしました' : '結果をコピー'}
      </button>
      {result.duplicates.length > 0 && (
        <details>
          <summary>2回以上出てきた行（{result.duplicates.length}種類）</summary>
          <ul>
            {result.duplicates.map((d) => (
              <li key={d.line}>
                <code>{d.line}</code> … {d.count}回
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}

.deduper {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.deduper textarea {
  font: inherit;
  white-space: pre;
  overflow-x: auto;
}
.deduper fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
}
.deduper button {
  justify-self: start;
}
.deduper ul {
  margin: 4px 0 0;
  padding-left: 1.5em;
}
.deduper code {
  white-space: pre;
  background: #eefafd;
}

りんご
みかん 
Apple
ぶどう
みかん

apple
ＡＰＰＬＥ
りんご
ﾊﾞﾅﾅ
バナナ