Reactで、テキストエリアの文章を検索して置換する方法

export type Match = { start: number; end: number };

// 正規表現で特別な意味を持つ文字の前に \ を付ける
export function escapeRegExp(text: string) {
  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 検索語を、そのままの文字として探す正規表現にする（g フラグは必ず付ける）
export function toSearchRegExp(query: string, matchCase: boolean): RegExp | null {
  if (query === '') return null;
  return new RegExp(escapeRegExp(query), matchCase ? 'g' : 'gi');
}

// 一致した位置を、すべて [start, end) の組で返す
export function findMatches(text: string, regExp: RegExp | null): Match[] {
  if (!regExp) return [];
  return [...text.matchAll(regExp)].map((m) => ({ start: m.index, end: m.index + m[0].length }));
}

// すべて置換する。置換後の文字を関数で返すと、$& などが特別扱いされない
export function replaceAllMatches(text: string, regExp: RegExp, replacement: string) {
  return text.replace(regExp, () => replacement);
}

matchAll: TypeError String.prototype.matchAll called with a non-global RegExp argument

「猫」 [{"start":0,"end":1},{"start":8,"end":9}]
「cat」区別しない [{"start":15,"end":18},{"start":21,"end":24}]
「cat」区別する [{"start":21,"end":24}]
「」（空） []

import { useEffect, useMemo, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { findMatches, replaceAllMatches, toSearchRegExp, type Match } from './textSearch';

const INITIAL = '猫は朝に鳴く。\n子猫は夜に鳴く。\nネコもねこも猫も、Cat も cat も同じ。';

export function FindReplace() {
  const [text, setText] = useState(INITIAL);
  const [query, setQuery] = useState('');
  const [replacement, setReplacement] = useState('');
  const [matchCase, setMatchCase] = useState(false);
  const [selection, setSelection] = useState<Match>({ start: 0, end: 0 });
  const [message, setMessage] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const regExp = useMemo(() => toSearchRegExp(query, matchCase), [query, matchCase]);
  const matches = useMemo(() => findMatches(text, regExp), [text, regExp]);
  // 今選んでいる範囲が、何件目の一致か（一致を選んでいなければ -1）
  const current = matches.findIndex((m) => m.start === selection.start && m.end === selection.end);

  // 本文の選択範囲が変わるたびに覚えておく（クリック、キー操作、setSelectionRange のどれでも起きる）
  useEffect(() => {
    const textarea = textareaRef.current!;
    const update = () => setSelection({ start: textarea.selectionStart, end: textarea.selectionEnd });
    textarea.addEventListener('selectionchange', update);
    return () => textarea.removeEventListener('selectionchange', update);
  }, []);

  function select(m: Match) {
    const textarea = textareaRef.current!;
    textarea.focus();
    textarea.setSelectionRange(m.start, m.end);
  }

  // from の位置より後ろで最初の一致を選ぶ。なければ先頭に戻る
  function selectNext(list: Match[], from: number) {
    if (list.length === 0) return;
    select(list.find((m) => m.start >= from) ?? list[0]);
  }

  function handleFindNext() {
    setMessage('');
    selectNext(matches, textareaRef.current!.selectionEnd);
  }

  function handleReplace() {
    setMessage('');
    const m = matches[current];
    // 一致を選んでいないときは、置換せずに次の一致を選ぶだけにする
    if (!m) return selectNext(matches, textareaRef.current!.selectionEnd);
    const next = text.slice(0, m.start) + replacement + text.slice(m.end);
    // 新しい value を DOM に入れ終えてから、選択範囲を動かす
    flushSync(() => setText(next));
    // 置き換えた文字の後ろから探す（置換後の文字の中で、また一致しないように）
    selectNext(findMatches(next, regExp), m.start + replacement.length);
  }

  function handleReplaceAll() {
    if (!regExp || matches.length === 0) return;
    setText(replaceAllMatches(text, regExp, replacement));
    setMessage(`${matches.length}件を置換しました`);
  }

  return (
    <div className="find-replace">
      <div className="row">
        <input aria-label="検索" placeholder="検索" value={query} onChange={(e) => setQuery(e.target.value)} />
        <label>
          <input type="checkbox" checked={matchCase} onChange={(e) => setMatchCase(e.target.checked)} />
          大文字と小文字を区別
        </label>
      </div>
      <div className="row">
        <input aria-label="置換後" placeholder="置換後" value={replacement} onChange={(e) => setReplacement(e.target.value)} />
      </div>
      <div className="row">
        <button onClick={handleFindNext} disabled={matches.length === 0}>次を検索</button>
        <button onClick={handleReplace} disabled={matches.length === 0}>置換</button>
        <button onClick={handleReplaceAll} disabled={matches.length === 0}>すべて置換</button>
        <span className="status" role="status">
          {message || (query === '' ? '' : `${matches.length}件中 ${current + 1 > 0 ? current + 1 : '-'}件目`)}
        </span>
      </div>
      <textarea
        ref={textareaRef}
        aria-label="本文"
        rows={5}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

検索欄に「猫」     選択 0〜0「」    | 表示「3件中 -件目」 | フォーカス: 検索
次を検索 1回目    選択 0〜1「猫」   | 表示「3件中 1件目」 | フォーカス: 本文
次を検索 2回目    選択 9〜10「猫」  | 表示「3件中 2件目」 | フォーカス: 本文
次を検索 3回目    選択 23〜24「猫」 | 表示「3件中 3件目」 | フォーカス: 本文
次を検索 4回目    選択 0〜1「猫」   | 表示「3件中 1件目」 | フォーカス: 本文

本文の左上をクリック（キャレットを先頭へ）
  selectionchange で追う版  選択 0〜0「」 | 表示「3件中 -件目」
  onSelect で追う版         選択 0〜0「」 | 表示「3件中 1件目」

「猫」を「子猫」に1件ずつ置換（flushSync を使わない版）
置換 1回目  本文は40文字 | 選択 0〜1「猫」 | 表示「3件中 1件目」
置換 2回目  本文は41文字 | 選択 41〜41「」 | 表示「3件中 -件目」
置換 3回目  本文は41文字 | 選択 1〜2「猫」 | 表示「3件中 1件目」

置き換えた位置の先頭から探す版
置換 2回目  本文「子猫は朝に鳴く。…」   選択 1〜2「猫」
置換 3回目  本文「子子猫は朝に鳴く。…」  選択 2〜3「猫」
置換 4回目  本文「子子子猫は朝に鳴く。…」 選択 3〜4「猫」

replace(正規表現, 文字列)      猫猫と子猫猫
replaceAll(文字列, 文字列)     猫猫と子猫猫
replace(正規表現, 関数)        $&$&と子$&$&

本文にフォーカスして Ctrl+Z（1回目）
  本文「犬は朝に鳴く。⏎子犬は…同じ。鳴く」 | 置換後の欄「」 | フォーカス: 置換後
Ctrl+Z（2回目）
  本文「犬は朝に鳴く。⏎子犬は…同じ。鳴く」 | 置換後の欄「」 | フォーカス: 検索