36. Tester wyrażeń regularnych

function RegexTester() {
  const [pattern, setPattern] = useState('');
  const [flags, setFlags] = useState('g');
  const [testText, setTestText] = useState('');
  const [error, setError] = useState(null);

  const { matches, highlightedHtml } = useMemo(() => {
    if (!pattern) return { matches: [], highlightedHtml: testText };
    try {
      const regex = new RegExp(pattern, flags);
      const matches = [...testText.matchAll(regex)];
      const highlightedHtml = testText.replace(regex, (match) =>
        `<mark class="match">${match}</mark>`
      );
      setError(null);
      return { matches, highlightedHtml };
    } catch (e) {
      setError(e.message);
      return { matches: [], highlightedHtml: testText };
    }
  }, [pattern, flags, testText]);

  return (
    <div>
      <div className="pattern-input">
        <span>/</span>
        <input value={pattern} onChange={(e) => setPattern(e.target.value)} placeholder="wzorzec" />
        <span>/</span>
        <input value={flags} onChange={(e) => setFlags(e.target.value)} className="flags" />
      </div>
      {error && <div className="error">{error}</div>}
      <textarea value={testText} onChange={(e) => setTestText(e.target.value)} />
      <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
      <div>Znaleziono: {matches.length} dopasowań</div>
    </div>
  );
}