Reactで、文章の中の表記ゆれを見つけてそろえる方法

// 文章の中の表記ゆれを見つけて、1つの書き方にそろえる

export type Variant = { form: string; count: number };
export type VariantGroup = {
  kind: 'katakana' | 'dictionary';
  key: string;
  variants: Variant[]; // 多く出てくる書き方から順に並べる
};

// カタカナの語。ァ〜ヺ、長音の ー、繰り返し記号の ヽ ヾ と、半角カナ（ｦ〜ﾟ）が続く部分
const KATAKANA_WORD = /[ァ-ヺー-ヾｦ-ﾟ]+/g;

const VU: Record<string, string> = { ヴァ: 'バ', ヴィ: 'ビ', ヴェ: 'ベ', ヴォ: 'ボ', ヴ: 'ブ' };

// 書き方の違いを消した「比べるための形」を作る
export function katakanaKey(word: string): string {
  return word
    .normalize('NFKC') // 半角カナを全角にする（ｻｰﾊﾞ → サーバ）
    .replace(/ヴ[ァィェォ]?/g, (s) => VU[s]) // ヴァイオリン → バイオリン
    .replace(/ー+$/, ''); // 語の終わりの長音を除く（サーバー → サーバ）
}

// 比べるための形が同じで、書き方が2つ以上ある語を集める
export function findKatakanaVariants(text: string): VariantGroup[] {
  const byKey = new Map<string, Map<string, number>>();
  for (const [word] of text.matchAll(KATAKANA_WORD)) {
    const key = katakanaKey(word);
    if (key.length < 2) continue; // 「ア」のような1文字の語は比べない
    const forms = byKey.get(key) ?? new Map<string, number>();
    forms.set(word, (forms.get(word) ?? 0) + 1);
    byKey.set(key, forms);
  }
  const groups: VariantGroup[] = [];
  for (const [key, forms] of byKey) {
    if (forms.size < 2) continue;
    const variants = [...forms].map(([form, count]) => ({ form, count }));
    groups.push({ kind: 'katakana', key, variants: variants.sort((a, b) => b.count - a.count) });
  }
  return groups;
}

// カタカナ以外の表記ゆれは、同じ意味の書き方の組を辞書にしておく
export const DICTIONARY: string[][] = [
  ['すべて', '全て'],
  ['ください', '下さい'],
  ['子ども', '子供'],
];

function countOf(text: string, form: string): number {
  return text.split(form).length - 1;
}

export function findDictionaryVariants(text: string, dictionary = DICTIONARY): VariantGroup[] {
  const groups: VariantGroup[] = [];
  for (const forms of dictionary) {
    const variants = forms
      .map((form) => ({ form, count: countOf(text, form) }))
      .filter((v) => v.count > 0);
    if (variants.length < 2) continue;
    groups.push({ kind: 'dictionary', key: forms[0], variants: variants.sort((a, b) => b.count - a.count) });
  }
  return groups;
}

export function findVariants(text: string): VariantGroup[] {
  return [...findKatakanaVariants(text), ...findDictionaryVariants(text)];
}

// group の書き方を、すべて to にそろえる
export function unify(text: string, group: VariantGroup, to: string): string {
  const others = group.variants.map((v) => v.form).filter((f) => f !== to);
  if (group.kind === 'katakana') {
    // カタカナの語の単位で置き換えるので、「サーバー」の中の「サーバ」は置き換えない
    return text.replace(KATAKANA_WORD, (w) => (others.includes(w) ? to : w));
  }
  return others.reduce((t, f) => t.split(f).join(to), text);
}

export type Segment = { text: string; mark: boolean };

const escape = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

// 表記ゆれの語を <mark> で囲んで表示するために、文章を区切る
export function highlight(text: string, groups: VariantGroup[]): Segment[] {
  const katakana = new Set<string>();
  const dictionary: string[] = [];
  for (const g of groups) {
    for (const v of g.variants) {
      if (g.kind === 'katakana') katakana.add(v.form);
      else dictionary.push(v.form);
    }
  }
  const pattern = [KATAKANA_WORD.source, ...dictionary.map(escape)].join('|');
  const segments: Segment[] = [];
  let last = 0;
  for (const m of text.matchAll(new RegExp(pattern, 'g'))) {
    const word = m[0];
    if (!katakana.has(word) && !dictionary.includes(word)) continue;
    if (m.index > last) segments.push({ text: text.slice(last, m.index), mark: false });
    segments.push({ text: word, mark: true });
    last = m.index + word.length;
  }
  if (last < text.length) segments.push({ text: text.slice(last), mark: false });
  return segments;
}

import { useId, useMemo, useState } from 'react';
import { findVariants, highlight, unify } from './variants';

export function VariantChecker({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  const groups = useMemo(() => findVariants(text), [text]);
  const segments = useMemo(() => highlight(text, groups), [text, groups]);

  return (
    <div className="variant-checker">
      <label htmlFor={id}>調べる文章</label>
      <textarea id={id} rows={6} value={text} onChange={(e) => setText(e.target.value)} />
      <p role="status">
        {groups.length === 0 ? '表記ゆれは見つかりませんでした' : `表記ゆれが${groups.length}組あります`}
      </p>
      <ul className="groups">
        {groups.map((g) => (
          <li key={`${g.kind}:${g.key}`}>
            {g.variants.map((v) => (
              <button key={v.form} type="button" onClick={() => setText(unify(text, g, v.form))}>
                {v.form}（{v.count}回）にそろえる
              </button>
            ))}
          </li>
        ))}
      </ul>
      <p className="preview">
        {segments.map((s, i) => (s.mark ? <mark key={i}>{s.text}</mark> : s.text))}
      </p>
    </div>
  );
}

.variant-checker { display: grid; gap: 8px; max-width: 480px; }
.variant-checker textarea { font-size: 16px; }
.variant-checker [role='status'] { margin: 0; color: #067a98; }
.variant-checker .groups { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.variant-checker .groups li { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 8px; border-left: 4px solid #00c8e8; }
.variant-checker .preview { margin: 0; white-space: pre-wrap; line-height: 1.8; }
.variant-checker mark { background: #ffe0e8; color: inherit; }