React关键词高亮组件问题：大小写不敏感匹配与子串高亮修复

问题1：大小写不敏感匹配失效 #

原代码正则未开启大小写不敏感模式，且判断字符串是否为关键词时用了严格相等，导致文本中大写/混合大小写的关键词无法匹配。

修改方案：

1. 正则表达式添加i（不区分大小写）和g（全局匹配）标志
2. 构建小写关键词映射表，实现不区分大小写的快速查找

问题2：子串关键词无法完整高亮 #

当关键词存在包含关系时（比如flu和influenza），原正则优先匹配短词，会把长词拆分成短词部分，导致长词本身无法被高亮。

修改方案：
将过滤后的关键词数组按字符串长度从长到短排序，让正则优先匹配长关键词，避免短词截断长词的匹配。

优化后的完整代码 #

export default function HighlightWord(props) {
  const { keyWords, text } = props;
  // 过滤空关键词 + 按长度降序排序，解决子串匹配优先级问题
  const highLightWords = keyWords
    .filter(keyword => keyword.trim() !== "")
    .sort((a, b) => b.length - a.length);

  const colors = [
    "#f3ff33",
    "#e285f5",
    "#c8fae9",
    "#f5e385",
  ];

  // 创建关键词映射表：小写关键词 -> { original: 原关键词, color: 对应颜色 }
  const keywordMap = highLightWords.reduce((map, word, index) => {
    map[word.toLowerCase()] = {
      original: word,
      color: colors[index % colors.length] // 颜色循环使用，支持超过4个关键词
    };
    return map;
  }, {});

  // 生成正则：匹配所有关键词，不区分大小写，优先匹配长词
  const regex = new RegExp(`(${highLightWords.join("|")})`, "gi");

  if (!text || highLightWords.length === 0) {
    return <>{text || ""}</>;
  }

  // 拆分文本并高亮匹配部分
  return (
    <div>
      {text.split(regex).map((segment, index) => {
        const lowerSegment = segment.toLowerCase();
        // 如果是关键词，返回高亮span
        if (keywordMap[lowerSegment]) {
          const { color } = keywordMap[lowerSegment];
          return (
            <span
              key={index}
              style={{ backgroundColor: color }}
            >
              {segment}
            </span>
          );
        }
        // 非关键词直接返回原文本
        return segment;
      })}
    </div>
  );
}

关键修改说明 #

1. 关键词排序：通过sort((a, b) => b.length - a.length)让长关键词排在前面，确保正则优先匹配长词
2. 大小写兼容：用gi标志开启全局+不区分大小写匹配，通过映射表存储小写关键词，实现快速匹配
3. 颜色扩展：用index % colors.length实现颜色循环使用，支持超过4个关键词的场景
4. 简化拆分逻辑：直接用包含关键词的正则拆分文本，拆分后的片段要么是关键词要么是非关键词，逻辑更清晰

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