React中如何通过split函数实现搜索关键词高亮并正确返回拆分片段？

嘿，我一眼就发现问题所在了——你的splitResult函数没有返回map处理后的JSX数组，这就是为什么item.title完全不显示的核心原因！

核心问题分析 #

原函数里，你调用了result.split(...).map(...)，但没有把map生成的JSX元素数组return出去。函数默认会返回undefined，所以当你在渲染逻辑里调用splitResult(item.title)时，实际上是在渲染undefined，自然看不到任何内容。

修正后的完整代码 #

// 拆分搜索关键词并生成高亮片段
const splitResult = (result) => {
  // 务必return map的结果！
  return result.split(new RegExp(`(${searchTerm})`, `gi`)).map((piece, index) => {
    // 处理搜索词为空的情况，避免无意义的匹配
    const isHighlighted = searchTerm && piece.toLowerCase() === searchTerm.toLowerCase();
    return (
      <span 
        key={`${piece}-${index}`} // 用piece+index做key，比单纯index更稳定
        style={{ 
          background: isHighlighted ? "yellow" : "transparent",
          fontWeight: isHighlighted ? "bold" : "normal" // 可选：加粗高亮文本增强视觉效果
        }}
      >
        {piece}
      </span>
    );
  });
};

// 渲染代码保持不变（本身逻辑没问题）
<div key={item.index}>
  <div>{splitResult(item.title)}</div>
  {item.content.map((i, index) => {
    return <div key={index}>{i.text}</div>;
  })}
  <div className={styles.searchLink} onClick={() => { context.setCurrentSlide(item.index);}} >Go To This Slide {item.index} </div>
</div>

额外优化点 #

1. key的稳定性：把key={index}改成key={${piece}-${index}}，避免当片段重复时（比如搜索词多次出现）React出现渲染异常。
2. 空搜索词处理：加了searchTerm &&的判断，防止搜索词为空时，整个字符串被错误地高亮。
3. 样式规范：把CSS属性值改成小写（yellow、transparent），符合前端开发的常规写法，也避免潜在的兼容性问题。

调试小技巧 #

如果还是有问题，可以在splitResult里加日志，确认拆分和JSX生成是否正常：

const splitResult = (result) => {
  const splitPieces = result.split(new RegExp(`(${searchTerm})`, `gi`));
  console.log("拆分后的文本片段:", splitPieces);
  const highlightedElements = splitPieces.map(/* ... */);
  console.log("生成的高亮元素:", highlightedElements);
  return highlightedElements;
};

这样就能直观定位问题啦！

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