自定义Highlight组件多关键词高亮时字符串拼接异常求助

嘿，我瞅了你的代码，发现几个核心问题导致了这个时好时坏的异常，特别是多关键词的时候会出现重复文本的情况，咱们一步步来解决：

问题根源分析 #

1. 全局偏移量lastOffset复用错误 #

你把lastOffset定义在所有关键词循环的外面，处理完第一个关键词后，这个值不会重置，后续处理其他关键词时，会基于之前的偏移量继续计算，完全打乱了每个关键词的匹配逻辑——这就是为什么加第三个关键词时输出彻底乱了的原因。

2. 数组res的修改逻辑混乱 #

在遍历res数组时，你直接往里面push新内容，但没有移除原来的字符串元素，导致旧的文本还留在数组里，后续循环会重复处理这些内容，最终输出大量重复的文本。而且stringEl.replace()是返回新字符串，你根本没用到这个返回值，等于白调用了。

3. 正则匹配的潜在风险（额外坑） #

原代码直接用new RegExp(element, "gi")，如果关键词里包含正则特殊字符（比如.、*、?），会直接当成正则语法解析，导致匹配出错，最好先把关键词里的特殊字符转义掉。

修复后的完整代码 #

我重写了highlightWords函数，简化了逻辑，同时解决了所有问题：

const highlightWords = (source, target, callback) => {
  // 边界情况处理：源字符串为空或无关键词时直接返回
  if (!source) return [];
  if (!target || target.length === 0) return [source];

  // 默认高亮样式，用UUID生成唯一key避免React警告
  const defaultHighlight = s => <em key={crypto.randomUUID()}>{s}</em>;
  const highlightFn = callback || defaultHighlight;

  // 转义关键词中的正则特殊字符，避免匹配出错
  const escapedTargets = target.map(word => 
    word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  );
  // 构建匹配所有关键词的正则，全局+不区分大小写
  const matchRegex = new RegExp(`(${escapedTargets.join('|')})`, 'gi');

  // 将源字符串分割为「普通文本」和「关键词」交替的数组
  const textParts = source.split(matchRegex);

  // 遍历分割后的数组，对关键词应用高亮
  return textParts.map((part, index) => {
    // 判断当前片段是否是目标关键词（忽略大小写，和原逻辑一致）
    const isTargetWord = target.some(word => 
      word.toLowerCase() === part.toLowerCase()
    );
    if (isTargetWord) {
      return highlightFn(part);
    }
    // 过滤空字符串，避免渲染无效内容
    return part === '' ? null : part;
  }).filter(Boolean);
};

export const Highlight = ({ body, items }) => {
  return (
    <div>
      {highlightWords(body, items, s => (
        <span className="bold-700" key={crypto.randomUUID()}>
          {s}
        </span>
      ))}
    </div>
  );
};

修复思路说明 #

1. 用正则分割简化逻辑：直接构建匹配所有关键词的正则，通过split把原字符串拆成普通文本和关键词交替的数组，彻底避免了复杂的偏移量计算，逻辑更清晰。
2. 正则转义处理：提前转义关键词里的特殊字符，确保即使关键词包含正则语法，也能准确匹配。
3. 可靠的key生成：用crypto.randomUUID()生成稳定的唯一key，比Math.random()更靠谱，不会出现React渲染时的key警告。
4. 空字符串过滤：split操作可能产生空字符串，过滤掉这些无效内容，避免渲染空节点。

测试验证 #

用你的测试案例验证：

• 传入["there", "hope", "overflow"]时，会正确输出：
  Hi <span class="bold-700">there</span> stack <span class="bold-700">overflow</span>, <span class="bold-700">hope</span> you're all well

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