React中如何为对象数组文本内的特定字符串设置样式？

核心思路 #

将shortStory字段中的目标词汇用带自定义样式的JSX元素包裹，其余文本保留原样，最终返回可直接渲染的JSX片段。

实现步骤 #

• 编写文本处理函数，接收原始文本和目标关键词，拆分文本并为关键词包裹样式元素
• 在渲染列表组件时，调用该函数处理每个对象的shortStory字段

单关键词处理示例 #

// 高亮指定关键词的函数
const highlightKeyword = (text, keyword) => {
  // 按关键词拆分文本，保留关键词本身
  const textParts = text.split(new RegExp(`(${keyword})`, 'gi'));
  
  return textParts.map((part, idx) => 
    // 匹配到关键词时添加样式
    part.toLowerCase() === keyword.toLowerCase() ? (
      <span key={idx} style={{ color: '#2563eb', fontWeight: '700' }}>
        {part}
      </span>
    ) : (
      part
    )
  );
};

// 博客列表渲染组件
const BlogList = ({ blogs }) => {
  // 要高亮的目标关键词
  const targetWord = '2014';
  
  return (
    <div className="blog-container">
      {blogs.map(blog => (
        <div key={blog.id} className="blog-card">
          <img src={blog.img} alt={blog.BlogTitle} />
          <h2>{blog.BlogTitle}</h2>
          {/* 调用处理函数渲染带高亮的文本 */}
          <p>{highlightKeyword(blog.shortStory, targetWord)}</p>
        </div>
      ))}
    </div>
  );
};

多关键词处理扩展 #

如果需要同时高亮多个词汇，可修改函数支持关键词数组：

const highlightKeywords = (text, keywords) => {
  // 生成匹配多个关键词的正则表达式
  const regexPattern = new RegExp(`(${keywords.join('|')})`, 'gi');
  const textParts = text.split(regexPattern);
  
  return textParts.map((part, idx) => 
    keywords.some(word => part.toLowerCase() === word.toLowerCase()) ? (
      <span key={idx} style={{ backgroundColor: '#fef3c7', padding: '0 4px', borderRadius: '3px' }}>
        {part}
      </span>
    ) : (
      part
    )
  );
};

// 使用示例
const targetWords = ['2014', '15'];
// 渲染时传入：highlightKeywords(blog.shortStory, targetWords)

注意事项 #

• 拆分文本时使用正则分组语法，确保关键词被保留在拆分结果中
• 为map返回的每个元素添加唯一key属性，避免React警告
• 样式可根据需求自定义，也可替换为CSS类名（如className="highlight-text"）

内容的提问来源于stack exchange，提问作者Mohamed Amine Hachemi