Reactで、入力した文字に色を付けるテキストエリアを作る方法

import { useRef, type ChangeEvent, type UIEvent } from 'react';
import { toSegments } from './segments';

type Props = {
  id: string;
  value: string;
  onChange: (value: string) => void;
  maxLength: number;
};

export function HighlightTextarea({ id, value, onChange, maxLength }: Props) {
  const backdropRef = useRef<HTMLDivElement>(null);

  // テキストエリアのスクロールを、後ろの div にそのまま写す
  const handleScroll = (e: UIEvent<HTMLTextAreaElement>) => {
    if (backdropRef.current) backdropRef.current.scrollTop = e.currentTarget.scrollTop;
  };

  return (
    <div className="hl-wrap">
      <div className="hl-backdrop" ref={backdropRef} aria-hidden="true">
        {toSegments(value, maxLength).map((s, i) =>
          s.kind === 'plain' ? s.text : <mark key={i} className={`hl-${s.kind}`}>{s.text}</mark>,
        )}
        {/* 最後が改行のとき、div は空の最終行を作らないので、空白を1つ足す */}
        {value.endsWith('\n') && ' '}
      </div>
      <textarea
        id={id}
        className="hl-input"
        value={value}
        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
        onScroll={handleScroll}
        spellCheck={false}
      />
    </div>
  );
}

- text: 投稿（#タグに色が付きます）
- textbox "投稿（#タグに色が付きます）": "#猫 です"
- paragraph: 残り55文字

export type Segment = { text: string; kind: 'plain' | 'tag' | 'over' };

const TAG = /#[\p{L}\p{N}_]+/gu;

// 文字列を「普通の文字」「#タグ」「上限を超えた部分」に分ける
export function toSegments(text: string, maxLength: number): Segment[] {
  const chars = Array.from(text); // 絵文字を1文字として数える
  const head = chars.slice(0, maxLength).join('');
  const over = chars.slice(maxLength).join('');

  const segments: Segment[] = [];
  let last = 0;
  for (const m of head.matchAll(TAG)) {
    if (m.index > last) segments.push({ text: head.slice(last, m.index), kind: 'plain' });
    segments.push({ text: m[0], kind: 'tag' });
    last = m.index + m[0].length;
  }
  if (last < head.length) segments.push({ text: head.slice(last), kind: 'plain' });
  if (over) segments.push({ text: over, kind: 'over' });
  return segments;
}

"今日は #猫 です" 上限60 → ["plain:今日は ","tag:#猫","plain: です"]
"#cat_photo と #ねこ2 と #" 上限60 → ["tag:#cat_photo","plain: と ","tag:#ねこ2","plain: と #"]
"色: #fff は?" 上限60 → ["plain:色: ","tag:#fff","plain: は?"]
"abc#tag" 上限60 → ["plain:abc","tag:#tag"]
"🐈🐈🐈🐈🐈" 上限3 → ["plain:🐈🐈🐈","over:🐈🐈"]
"あいう#タグえお" 上限5 → ["plain:あいう","tag:#タ","over:グえお"]

.hl-wrap {
  position: relative;
}

/* 文字の並びを決める指定は、2つの要素で必ずそろえる */
.hl-backdrop,
.hl-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  font: 16px/1.6 "Noto Sans CJK JP", sans-serif;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  scrollbar-gutter: stable; /* スクロールバーの幅を、両方で常に空けておく */
}

.hl-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #1f2a30;
  background: #fff;
}

.hl-input {
  position: relative; /* 後ろの div より手前に出す */
  display: block;
  height: 8.5em;
  resize: vertical;
  overflow-y: auto;
  color: transparent; /* 文字は後ろの div に描かせる */
  caret-color: #1f2a30; /* キャレットだけは見せる */
  background: transparent;
  border-color: #9aa5ab;
  border-radius: 6px;
}

.hl-input:focus {
  outline: 2px solid #00c8e8;
  outline-offset: 1px;
}

/* 色は背景と文字色だけで付ける。太さや大きさは変えない */
.hl-backdrop mark {
  color: inherit;
  background: none;
  border-radius: 3px;
}
.hl-backdrop .hl-tag {
  color: #067a98;
  background: #dff6fb;
}
.hl-backdrop .hl-over {
  background: #f8d3dc;
}

[完成形] textarea: scrollTop=167 scrollHeight=302 clientWidth=343 / div: scrollTop=167 scrollHeight=302 clientWidth=343
[完成形] 360x137 のうち、違うピクセル 0
[スクロールを写さない] textarea: scrollTop=167 scrollHeight=302 clientWidth=343 / div: scrollTop=0 scrollHeight=302 clientWidth=343
[スクロールを写さない] 360x137 のうち、違うピクセル 3238
[最後の改行に空白を足さない] textarea: scrollTop=167 scrollHeight=302 clientWidth=343 / div: scrollTop=142 scrollHeight=276 clientWidth=343
[最後の改行に空白を足さない] 360x137 のうち、違うピクセル 1413

[全角20文字の行・完成形] textarea: scrollTop=321 scrollHeight=455 clientWidth=343 / div: scrollTop=321 scrollHeight=455 clientWidth=343
[全角20文字の行・完成形] 360x137 のうち、違うピクセル 0
[全角20文字の行・scrollbar-gutter なし] textarea: scrollTop=321 scrollHeight=455 clientWidth=343 / div: scrollTop=116 scrollHeight=250 clientWidth=358
[全角20文字の行・scrollbar-gutter なし] 360x137 のうち、違うピクセル 2733

import { useState } from 'react';
import { HighlightTextarea } from './HighlightTextarea';

const MAX = 60;

export function App() {
  const [text, setText] = useState('');
  const rest = MAX - Array.from(text).length;

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label htmlFor="post">投稿（#タグに色が付きます）</label>
      <HighlightTextarea id="post" value={text} onChange={setText} maxLength={MAX} />
      <p className={rest < 0 ? 'count over' : 'count'}>
        {rest < 0 ? `${-rest}文字オーバー` : `残り${rest}文字`}
      </p>
    </form>
  );
}