Reactで、正規表現を試せる入力欄を作る方法

export type MatchInfo = {
  index: number; // 一致した位置（UTF-16 の単位）
  end: number;
  text: string;
  captures: (string | undefined)[]; // $1, $2, … の中身
  named: Record<string, string | undefined>; // (?<名前>…) の中身
};

export type RunResult =
  | { ok: true; matches: MatchInfo[]; truncated: boolean }
  | { ok: false; error: string };

export const MAX_MATCHES = 500;

export function runRegex(pattern: string, flags: string, text: string): RunResult {
  let regExp: RegExp;
  try {
    // 一覧を作るために g は必ず付ける。g がオフなら、最初の1件だけを返す
    regExp = new RegExp(pattern, flags.includes('g') ? flags : flags + 'g');
  } catch (e) {
    return { ok: false, error: e instanceof SyntaxError ? e.message : String(e) };
  }

  const limit = flags.includes('g') ? MAX_MATCHES : 1;
  const matches: MatchInfo[] = [];
  for (const m of text.matchAll(regExp)) {
    if (matches.length === limit) return { ok: true, matches, truncated: limit === MAX_MATCHES };
    matches.push({
      index: m.index,
      end: m.index + m[0].length,
      text: m[0],
      captures: m.slice(1),
      named: { ...m.groups },
    });
  }
  return { ok: true, matches, truncated: false };
}

import { useMemo, useState, type ReactNode } from 'react';
import { runRegex, type MatchInfo, type RunResult } from './runRegex';

const FLAGS = ['g', 'i', 'm', 's', 'u', 'v', 'y'] as const;

export function RegexTester() {
  const [pattern, setPattern] = useState('(?<year>\\d{4})-(\\d{2})-(\\d{2})');
  const [flags, setFlags] = useState('g');
  const [text, setText] = useState('2026-11-05 猫の健康診断\n2027-02-22 猫の日');
  const result: RunResult | null = useMemo(() => runRegex(pattern, flags, text), [pattern, flags, text]);

  const toggleFlag = (flag: string) =>
    setFlags((prev) =>
      FLAGS.filter((f) => (f === flag ? !prev.includes(f) : prev.includes(f))).join(''),
    );

  return (
    <div className="rx">
      <label className="rx-pattern">
        <span>/</span>
        <input
          aria-label="正規表現"
          value={pattern}
          onChange={(e) => setPattern(e.target.value)}
          spellCheck={false}
          autoCapitalize="off"
          autoComplete="off"
        />
        <span>/{flags}</span>
      </label>
      <fieldset className="rx-flags">
        <legend>フラグ</legend>
        {FLAGS.map((f) => (
          <label key={f}>
            <input type="checkbox" checked={flags.includes(f)} onChange={() => toggleFlag(f)} />
            {f}
          </label>
        ))}
      </fieldset>
      <textarea aria-label="試す文字列" value={text} onChange={(e) => setText(e.target.value)} rows={4} />

      {result === null ? (
        <p className="rx-status">調べています…</p>
      ) : !result.ok ? (
        <p role="alert" className="rx-error">{result.error}</p>
      ) : (
        <>
          <p className="rx-status" aria-live="polite">
            {result.matches.length}件一致{result.truncated && '（ここで打ち切りました）'}
          </p>
          <Highlighted text={text} matches={result.matches} />
          <MatchList matches={result.matches} />
        </>
      )}
    </div>
  );
}

function Highlighted({ text, matches }: { text: string; matches: MatchInfo[] }) {
  const parts: ReactNode[] = [];
  let pos = 0;
  matches.forEach((m, i) => {
    if (m.index > pos) parts.push(text.slice(pos, m.index));
    // 長さ 0 の一致（^ や \b など）は、文字がないので縦線で位置だけを示す
    parts.push(
      m.end === m.index ? <mark key={i} className="rx-empty" /> : <mark key={i}>{m.text}</mark>,
    );
    pos = m.end;
  });
  parts.push(text.slice(pos));
  return <pre className="rx-preview">{parts}</pre>;
}

function MatchList({ matches }: { matches: MatchInfo[] }) {
  return (
    <ol className="rx-list">
      {matches.map((m, i) => (
        <li key={i}>
          <code>{JSON.stringify(m.text)}</code>（{m.index}〜{m.end}）
          {m.captures.map((c, j) => (
            <div key={j} className="rx-group">${j + 1}: {c === undefined ? '（なし）' : JSON.stringify(c)}</div>
          ))}
          {Object.entries(m.named).map(([name, c]) => (
            <div key={name} className="rx-group">{name}: {c === undefined ? '（なし）' : JSON.stringify(c)}</div>
          ))}
        </li>
      ))}
    </ol>
  );
}

1. "2026-11-05"（0〜10） / $1: "2026" / $2: "11" / $3: "05" / year: "2026"
2. "2027-02-22"（18〜28） / $1: "2027" / $2: "02" / $3: "22" / year: "2027"

.rx { display: grid; gap: 10px; max-width: 520px; font-size: 15px; color: #1f2a30; }
.rx-pattern { display: flex; align-items: center; gap: 4px; font-family: ui-monospace, monospace; }
.rx-pattern input { flex: 1; font: inherit; padding: 6px 8px; }
.rx-flags { display: flex; flex-wrap: wrap; gap: 12px; border: 1px solid #c8dde3; font-family: ui-monospace, monospace; }
.rx textarea { font: 14px/1.6 ui-monospace, monospace; padding: 6px 8px; }
.rx-preview { margin: 0; padding: 8px; background: #eefafd; font: 14px/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-preview mark { background: #b8f0fa; color: inherit; border-radius: 2px; }
.rx-preview mark.rx-empty { display: inline-block; width: 0; height: 1.2em; vertical-align: text-bottom; border-left: 2px solid #d85878; background: none; }
.rx-error { color: #b03050; font-family: ui-monospace, monospace; }
.rx-list { margin: 0; padding-left: 1.6em; font-family: ui-monospace, monospace; font-size: 14px; }
.rx-group { padding-left: 1em; color: #067a98; }

1. ""（0〜0）
2. "aa"（1〜3）
3. ""（3〜3）
4. ""（4〜4）

exec の while: 0:"" 0:"" 0:"" 0:"" 0:"" 0:"" 0:"" 0:"" …（8回で打ち切り）  lastIndex = 0
matchAll    : 0:"" 1:"aa" 3:"" 4:""

/// <reference lib="webworker" />
import { runRegex } from './runRegex';

self.onmessage = (e: MessageEvent<{ pattern: string; flags: string; text: string }>) => {
  const { pattern, flags, text } = e.data;
  self.postMessage(runRegex(pattern, flags, text));
};

import { useEffect, useState } from 'react';
import type { RunResult } from './runRegex';

const TIMEOUT_MS = 1000;

// 正規表現の実行を Worker に任せ、時間がかかりすぎたら Worker ごと止める
// 次の結果が届くまでは、前の結果をそのまま返す（最初だけ null）
export function useRegexWorker(pattern: string, flags: string, text: string): RunResult | null {
  const [result, setResult] = useState<RunResult | null>(null);

  useEffect(() => {
    const worker = new Worker('regex-worker.js');
    const timer = setTimeout(() => {
      worker.terminate();
      setResult({ ok: false, error: `${TIMEOUT_MS / 1000}秒たっても終わらないので、止めました` });
    }, TIMEOUT_MS);

    worker.onmessage = (e: MessageEvent<RunResult>) => {
      clearTimeout(timer);
      worker.terminate();
      setResult(e.data);
    };
    worker.postMessage({ pattern, flags, text });

    // 入力が変わったら、前の実行は結果を待たずに止める
    return () => {
      clearTimeout(timer);
      worker.terminate();
    };
  }, [pattern, flags, text]);

  return result;
}

- const result: RunResult | null = useMemo(() => runRegex(pattern, flags, text), [pattern, flags, text]);
+ const result: RunResult | null = useRegexWorker(pattern, flags, text);