如何在React应用中实现文本鼠标悬停时高亮单词

实现方案 #

要实现鼠标悬停文本时高亮指定单词，核心是通过状态控制高亮开关，结合正则匹配拆分文本，给目标单词添加高亮样式。以下是修正后的可运行代码：

import { useState } from 'react';
import styles from './YourComponent.module.css'; // 替换为你的样式文件路径

const TextHighlightComponent = ({ data }) => {
  // 安全获取目标文本，处理空值场景
  const text = data?.[data.length - 1]?.taskText || '';
  // 定义需要高亮的目标单词，可根据业务动态调整
  const targetWord = '指定单词';
  // 状态控制高亮的开启/关闭
  const [isHighlighting, setIsHighlighting] = useState(false);

  // 文本高亮处理函数
  const highlightText = (text, target, enable) => {
    if (!enable || !target) return text;

    // 正则匹配目标单词，忽略大小写
    const regex = new RegExp(`(${target})`, 'gi');
    // 拆分文本，给匹配到的单词添加高亮类
    return text.split(regex).map((substring, index) => {
      const isMatch = regex.test(substring);
      return (
        <span 
          key={index} 
          className={isMatch ? styles.highlight : ''}
        >
          {substring}
        </span>
      );
    });
  };

  return (
    <p 
      className={styles.text}
      onMouseEnter={() => setIsHighlighting(true)}
      onMouseLeave={() => setIsHighlighting(false)}
    >
      {highlightText(text, targetWord, isHighlighting)}
    </p>
  );
};

export default TextHighlightComponent;

关键说明 #

• 状态控制：用isHighlighting布尔状态管理高亮开关，鼠标进入文本区域时开启高亮，离开时关闭。
• 文本处理：通过正则拆分文本，判断每个子串是否为目标单词，给匹配项绑定高亮样式。
• 空值防护：使用可选链?.简化空值判断，避免因数据未加载导致的报错。
• 样式补充：在样式文件中添加高亮样式示例：

.highlight {
  background-color: #ffff00;
  font-weight: 600;
}

原代码问题修正 #

你提供的原代码存在逻辑错误：将hilightWord设为布尔值，但在正则匹配中却将其当作匹配字符串使用，导致无法正确识别目标单词。修正后将状态改为控制高亮开关，单独定义目标单词，确保匹配逻辑正常运行。

内容的提问来源于stack exchange，提问作者Сулейман Хасанов