Reactで、長い文章を決めた文字数ごとに分ける方法

// 長い文章を、決めた文字数ごとに分ける関数

export type SplitMode = 'chars' | 'sentence';

const graphemes = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const sentences = new Intl.Segmenter('ja', { granularity: 'sentence' });

// 見た目の1文字（書記素）ごとに分ける
function toGraphemes(text: string): string[] {
  return Array.from(graphemes.segment(text), (s) => s.segment);
}

export function countChars(text: string): number {
  return toGraphemes(text).length;
}

// 文字数ちょうどで分ける
function splitByChars(text: string, max: number): string[] {
  const chars = toGraphemes(text);
  const chunks: string[] = [];
  for (let i = 0; i < chars.length; i += max) {
    chunks.push(chars.slice(i, i + max).join(''));
  }
  return chunks;
}

// 文に分ける。Intl.Segmenter の区切りを、かぎかっこに合わせて2か所だけ直す
export function toSentences(text: string): string[] {
  const list: string[] = [];
  let carry = '';
  for (const { segment } of sentences.segment(text)) {
    let s = carry + segment;
    carry = '';
    // 文の末尾に付いた開きかっこ（「本当？「」の「）は、次の文の頭へ移す
    const open = s.match(/[「『（【]+$/);
    if (open && open[0].length < s.length) {
      carry = open[0];
      s = s.slice(0, -carry.length);
    }
    // 閉じかっこで終わる文（「はい。」）は、改行が来るまで次の文（と言った。）とつなげる
    const prev = list.at(-1);
    if (prev !== undefined && /[」』）】]$/.test(prev)) {
      list[list.length - 1] = prev + s;
    } else {
      list.push(s);
    }
  }
  if (carry) list.push(carry);
  return list;
}

// 文の切れ目で、max 字に収まるだけ文を詰める。1文で max 字を超えるときは、その文だけ文字数で分ける
function splitBySentence(text: string, max: number): string[] {
  const chunks: string[] = [];
  let current = '';
  let currentLength = 0;
  for (const sentence of toSentences(text)) {
    const length = toGraphemes(sentence).length;
    if (currentLength + length <= max) {
      current += sentence;
      currentLength += length;
      continue;
    }
    if (current) chunks.push(current);
    if (length <= max) {
      current = sentence;
      currentLength = length;
    } else {
      const parts = splitByChars(sentence, max);
      current = parts.pop()!;
      currentLength = toGraphemes(current).length;
      chunks.push(...parts);
    }
  }
  if (current) chunks.push(current);
  return chunks;
}

export function splitText(text: string, max: number, mode: SplitMode = 'chars'): string[] {
  if (max < 1) return [];
  const normalized = text.replace(/\r\n?/g, '\n');
  return mode === 'sentence' ? splitBySentence(normalized, max) : splitByChars(normalized, max);
}

// 「（1/3）」のような番号を付けても max 字に収まるように分ける。番号だけで max 字を超えるときは空の配列を返す
export function splitWithNumbers(text: string, max: number, mode: SplitMode = 'chars'): string[] {
  let total = 1;
  for (;;) {
    // 番号がいちばん長くなるのは「（3/3）」のように最後の1つ
    const bodyLength = max - countChars(`（${total}/${total}）`);
    if (bodyLength < 1) return [];
    const chunks = splitText(text, bodyLength, mode);
    if (String(chunks.length).length === String(total).length) {
      return chunks.map((c, i) => `${c}（${i + 1}/${chunks.length}）`);
    }
    // total は減らさず、桁数が増える向きにだけ進める
    total = Math.max(total, chunks.length);
  }
}

import { useId, useState } from 'react';
import { countChars, splitText, splitWithNumbers, type SplitMode } from './splitText';

export function TextSplitter({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  // 入力中の「」（空）も受け付けるため、入力欄の文字列のまま持つ
  const [maxInput, setMaxInput] = useState('140');
  const [mode, setMode] = useState<SplitMode>('sentence');
  const [numbered, setNumbered] = useState(false);
  // 最後にコピーした「何番目の、どの文字列か」
  const [copied, setCopied] = useState<{ index: number; text: string } | null>(null);

  const max = Math.max(10, Math.floor(Number(maxInput)) || 10);
  // 分けた結果は state に持たず、描くたびに作る
  const chunks = numbered ? splitWithNumbers(text, max, mode) : splitText(text, max, mode);

  async function copy(index: number) {
    await navigator.clipboard.writeText(chunks[index]);
    setCopied({ index, text: chunks[index] });
  }

  return (
    <div className="splitter">
      <label htmlFor={`${id}-text`}>文章</label>
      <textarea id={`${id}-text`} rows={6} value={text} onChange={(e) => setText(e.target.value)} />
      <div className="options">
        <label>
          1つあたり
          <input type="number" min={10} value={maxInput} onChange={(e) => setMaxInput(e.target.value)} />
          字まで
        </label>
        <label>
          <input
            type="checkbox"
            checked={mode === 'sentence'}
            onChange={(e) => setMode(e.target.checked ? 'sentence' : 'chars')}
          />
          文の切れ目で分ける
        </label>
        <label>
          <input type="checkbox" checked={numbered} onChange={(e) => setNumbered(e.target.checked)} />
          番号を付ける
        </label>
      </div>
      <p aria-live="polite">
        {text && chunks.length === 0 ? '字数が少なすぎて、番号を付けると分けられません' : `${chunks.length}個に分けました`}
      </p>
      <ol className="chunks">
        {chunks.map((chunk, i) => (
          <li key={i}>
            <p className="chunk-text">{chunk}</p>
            <div className="chunk-footer">
              <span>{countChars(chunk)}字</span>
              <button type="button" onClick={() => copy(i)}>
                {copied?.index === i && copied.text === chunk ? 'コピーしました' : 'コピー'}
              </button>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

.splitter {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.splitter textarea {
  font: inherit;
}
.splitter .options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.splitter input[type='number'] {
  inline-size: 5em;
  margin: 0 4px;
}
.chunks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chunks li {
  padding: 8px 12px;
  border: 1px solid #00c8e8;
  border-radius: 6px;
  background: #eefafd;
}
.chunk-text {
  margin: 0;
  /* 改行をそのまま見せ、長い英数字は枠の中で折り返す */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chunk-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 0.85em;
  color: #067a98;
}