React中实现长字符串换行并为指定关键词着色的方法求助

你可以新增一个辅助函数处理单句中的关键词高亮，在原有行分割映射的逻辑里，把原本直接渲染的文本替换成经过高亮处理的内容。具体实现如下：

1. 定义高亮配置 #

先把需要高亮的关键词和对应颜色整理成配置对象，方便后续维护：

// 自定义需要高亮的关键词及对应颜色
const highlightConfig = {
  'export': '#569CD6',
  'const': '#4EC9B0',
  'fadeAnimation': '#DCDCAA',
  'initial': '#9CDCFE',
  'animate': '#9CDCFE',
  'exit': '#9CDCFE'
};

2. 实现关键词高亮辅助函数 #

这个函数会把单句中的关键词用带颜色的<span>包裹：

// 处理单个字符串的关键词高亮逻辑
const highlightKeywords = (text) => {
  // 生成匹配关键词的正则，\b 确保只匹配完整单词
  const keywordRegex = new RegExp(`\\b(${Object.keys(highlightConfig).join('|')})\\b`, 'g');
  // 按关键词拆分字符串后，遍历生成混合文本和span的React元素数组
  return text.split(keywordRegex).map((part, index) => {
    if (highlightConfig[part]) {
      return <span key={index} style={{ color: highlightConfig[part] }}>{part}</span>;
    }
    return part;
  });
};

3. 修改原有格式化函数 #

把原本直接渲染{item}的地方，替换成调用高亮函数的结果，同时简化原有样式判断逻辑：

const formatText = (text) => {
  const finalMessage = text.split('\n').map((item, index, row) => {
    const isFirstOrLast = index === 0 || index + 1 === row.length;
    return (
      <div 
        key={index} 
        style={{
          marginLeft: isFirstOrLast ? '0' : '20px',
          color: 'rgb(166, 154, 154)'
        }}
      >
        {highlightKeywords(item)}
        <br/>
      </div>
    );
  });
  return finalMessage;
};

说明 #

• 正则中的\b是单词边界，能避免误匹配包含关键词的长单词（比如不会把fadeAnimationTest里的fadeAnimation错误高亮）；
• highlightConfig可以随时新增、删除或修改关键词和颜色，适配不同的高亮需求；
• 原有缩进、换行的逻辑完全保留，只是把文本渲染替换成了高亮处理后的内容。

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