【React】条件によってtextareaの文字の色を変えたいです。

Question

【質問の背景】
現在文字数のカウントをできるアプリを作成しています。
その中で、textarea内の見出し(## で始まるもの)のみ、色を変えたいのですが、解決方法が分からず質問させていただきました。

【現状】
正規表現を使い、見出し部分の抽出はできていますが、抽出したもののみ色を変える方法が分からない状況です。例えば、hello world!!の部分は、黒文字のまま。見出しをグリーンにしたいというイメージです。

![

export default function Form({ text, setText }) {

  const handleTitlesColor = () => {
    let titles = text.match(/^#+ .+/gm);
    //マッチしたものは,"text-green-400"、それ以外は"text-black"とする処理
  };
  return (
    <div className="w-full p-3">
      <textarea
        id="countForm"
        className={
          "w-full bg-white h-5/6 p-3 outline-none " + handleTitlesColor()
        }
        onChange={(e) => setText(e.target.value)}
        value={text}
      />
    </div>
  );
}

【自分の考え】
正規表現でマッチしたものをmapで取り出すことはできる。
しかし、その取り出したものにのみスタイルを当てるはどうすれば良いのか分からない。

let titles = text.match(/^#+ .+/gm)
→マッチする見出しが配列で返ってくる

let colorTitle = titles.map((title)=>....)
→配列から要素を取り出す

Answer 1

<textarea>で、テキストの一部だけスタイルを変えるのは不可能です。

<div contenteditable=true>などにして、目的の範囲を Selection API で選択して、execCommand('forecolor', ...)で色を変更するのはいかがでしょうか。

contenteditable=true を使うとペースト時にもスタイル情報が入り込んでしまうので、そのあたりの対処も必要になります。