React中如何解决ContentEditable动态文本及^标记字符着色问题

我有字符串^aUsername ^bLastName ^cAge，需要创建一个可编辑元素来编辑该字符串，要求将标记^后的首个字符设置为红色加粗样式。目前我使用react-contenteditable库在React中实现，但无法向输入框添加新内容。请问如何实现新增内容时仍保持^开头字符的着色效果？

当前实现代码 #

function getParsedValue(value) {
  let vals = value.split('^').slice(1);
  let text = "";

  if (vals) {
    vals.map((val, i) => {
      text = text + `<span style="color:red; font-weight:bold">${val[0]}</span>${val.slice(1)}`;
    })
  } else {
    text = value;
  }
  return text;
}


function MarcInput({ value }) {
  const [text, setText] = useState(marc);

  const handleChanges = (event) => {
    setText(event.target.value);
  };


  return (
    <>
      <ContentEditable
        onChange={handleChanges}
        html={getParsedValue(text)}
      />
    </>
  );
}

当前代码存在三个核心问题：

1. getParsedValue通过拆分^后丢弃了原始字符串中^之前的内容，导致非标记开头的文本丢失
2. onChange直接存储HTML内容（event.target.value），会让状态混入<span>标签，后续渲染逻辑混乱
3. 状态初始化错误使用了未定义的marc，应该用传入的value

以下是修正后的实现：

修正后的代码 #

import { useState } from 'react';
import ContentEditable from 'react-contenteditable';

// 处理文本，将^后的首个字符替换为红色加粗样式
function getParsedValue(value) {
  // 正则匹配所有^开头的单个字符，保留其余内容
  return value.replace(/\^(.)/g, '<span style="color:red; font-weight:bold">$1</span>');
}

function MarcInput({ value }) {
  // 初始化状态为传入的原始文本，仅存储纯文本
  const [text, setText] = useState(value || '');

  const handleChanges = (event) => {
    // 提取编辑区域的纯文本，避免HTML标签混入状态
    const plainText = event.target.textContent;
    setText(plainText);
  };

  return (
    <ContentEditable
      onChange={handleChanges}
      html={getParsedValue(text)}
      tagName="div"
      style={{ border: '1px solid #ccc', padding: '8px', minHeight: '40px' }}
    />
  );
}

export default MarcInput;

关键改进点 #

• 正则替换替代拆分拼接：用replace(/\^(.)/g)精准匹配所有^后的首个字符，完整保留原始文本的所有内容，不会丢失非标记开头的部分
• 状态仅存纯文本：避免HTML标签进入状态，确保编辑逻辑基于用户输入的原始文本，后续渲染时再通过getParsedValue转换为带样式的HTML
• 正确提取编辑内容：通过textContent获取纯文本，而非直接使用event.target.value（后者是HTML内容），保证状态的纯净性

这样修改后，用户可以正常输入新增内容，只要输入^后跟任意字符，该字符会自动被渲染为红色加粗，同时不影响普通文本的编辑。

内容的提问来源于stack exchange，提问作者peon123