Reactで、1文の長さを数えて長い文を目立たせる方法

入力    "今日は晴れです。明日は雨です。"
  Intl.Segmenter ["今日は晴れです。","明日は雨です。"]

入力    "「行こう。」と彼は言った。次の文です。"
  Intl.Segmenter ["「行こう。」","と彼は言った。","次の文です。"]
入力    "「はい。」「いいえ。」"
  Intl.Segmenter ["「はい。」「","いいえ。」"]

export type Sentence = { text: string; start: number; length: number };

const ENDS = new Set(['。', '．', '！', '？', '!', '?']);
const OPEN = new Set(['「', '『', '（', '(', '【', '〈', '《']);
const CLOSE = new Set(['」', '』', '）', ')', '】', '〉', '》']);

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

// 見た目の1文字ごとに数える。文の前後の空白と改行は数えない
export function countChars(text: string): number {
  let n = 0;
  for (const _ of graphemes.segment(text.trim())) n++;
  return n;
}

// 。！？と改行で文を区切る。かっこの中の。では区切らない
export function splitSentences(text: string): Sentence[] {
  const result: Sentence[] = [];
  let start = 0;
  let depth = 0;

  const cut = (end: number, takeSpaces = true) => {
    // 句点などのあとの空白は、前の文に含める（改行のあとの字下げは次の文に残す）
    while (takeSpaces && (text[end] === ' ' || text[end] === '　')) end++;
    const s = text.slice(start, end);
    if (s.trim() === '') {
      // 空白や改行だけなら文にしない。前の文があれば、その後ろに付ける
      const last = result.at(-1);
      if (last) {
        last.text += s;
        start = end;
      }
      return end;
    }
    result.push({ text: s, start, length: countChars(s) });
    start = end;
    return end;
  };

  for (let i = 0; i < text.length; i++) {
    const c = text[i];
    if (c === '\n') {
      depth = 0; // 閉じ忘れたかっこは、段落の終わりで打ち切る
      i = cut(i + 1, false) - 1;
    } else if (OPEN.has(c)) {
      depth++;
    } else if (CLOSE.has(c)) {
      if (depth > 0) depth--;
      // 「はい。」「いいえ。」のように、文で終わるかっこが続くときは区切る
      if (depth === 0 && ENDS.has(text[i - 1]) && OPEN.has(text[i + 1])) i = cut(i + 1) - 1;
    } else if (depth === 0 && ENDS.has(c)) {
      while (ENDS.has(text[i + 1])) i++; // ？！ のように続く記号は1つにまとめる
      i = cut(i + 1) - 1;
    }
  }
  cut(text.length);
  return result;
}

入力    "「行こう。」と彼は言った。次の文です。"
  Intl.Segmenter ["「行こう。」","と彼は言った。","次の文です。"]
  splitSentences ["「行こう。」と彼は言った。","次の文です。"] 13,6
入力    "「はい。」「いいえ。」"
  Intl.Segmenter ["「はい。」「","いいえ。」"]
  splitSentences ["「はい。」","「いいえ。」"] 5,6
入力    "1つ目の段落です。\n\n2つ目の段落です。"
  Intl.Segmenter ["1つ目の段落です。\n","\n","2つ目の段落です。"]
  splitSentences ["1つ目の段落です。\n\n","2つ目の段落です。"] 9,9
入力    "猫の絵文字🐈‍⬛を入れた文です。"
  Intl.Segmenter ["猫の絵文字🐈‍⬛を入れた文です。"]
  splitSentences ["猫の絵文字🐈‍⬛を入れた文です。"] 14

入力    "（注：これは補足です。）本文に戻ります。"
  Intl.Segmenter ["（注：これは補足です。）","本文に戻ります。"]
  splitSentences ["（注：これは補足です。）本文に戻ります。"] 20

import { useId, useState } from 'react';
import { splitSentences } from './sentences';

const SAMPLE =
  '文が長くなると、読み手は途中で主語を見失います。' +
  '特にスマートフォンでは一度に見える文字が少ないので、読点で区切りながら続けた長い文は、どこで切れるのかを探しながら読むことになり、内容よりも文の形に気を取られてしまいます。' +
  '「短く書こう。」と決めても、書いている最中は気づきにくいものです。';

export function LongSentenceChecker() {
  const [text, setText] = useState(SAMPLE);
  const [limitText, setLimitText] = useState('60');
  const textId = useId();
  const limitId = useId();

  const sentences = splitSentences(text);
  const limit = Number(limitText);
  const valid = Number.isInteger(limit) && limit > 0;
  const isLong = (length: number) => valid && length > limit;
  const longCount = sentences.filter((s) => isLong(s.length)).length;

  return (
    <div className="checker">
      <label htmlFor={textId}>文章</label>
      <textarea id={textId} rows={6} value={text} onChange={(e) => setText(e.target.value)} />

      <label htmlFor={limitId}>長い文とみなす文字数</label>
      <input
        id={limitId}
        type="number"
        min={1}
        step={10}
        value={limitText}
        onChange={(e) => setLimitText(e.target.value)}
      />
      <span>字を超える文</span>

      <p className="summary">
        {valid
          ? `${sentences.length}文のうち、${limit}字を超える文は${longCount}文です。`
          : '文字数は1以上の整数で入れてください。'}
      </p>

      <p className="preview">
        {sentences.map((s) =>
          isLong(s.length) ? (
            <mark key={s.start}>
              {s.text}
              <small>（{s.length}字）</small>
            </mark>
          ) : (
            <span key={s.start}>{s.text}</span>
          ),
        )}
      </p>
    </div>
  );
}

.preview { white-space: pre-wrap; }
mark { background: #ffe1e9; color: inherit; }
mark small { color: #b03a58; font-weight: bold; }

--- 最初の表示（60字）
summary : 3文のうち、60字を超える文は1文です。
mark    : ["特にスマートフォンでは一度に見える文字が少ないので、読点で区切りながら続けた長い文は、どこで切れるのかを探しながら読むことになり、内容よりも文の形に気を取られてしまいます。（86字）"]

「はい。」「いいえ。」
「行こう。」と彼は言った。

10000字（857文）を区切る時間 中央値 9.5ms 最小 8.0ms 最大 11.0ms
100000字（8572文）を区切る時間 中央値 109.0ms 最小 95.3ms 最大 132.2ms