将含指定词汇的字符串转为带样式组件的数组（React/Next.js）

实现思路 #

• 提取样式字典中的关键词，构建不区分大小写的正则表达式
• 通过正则分割原字符串，同时保留匹配到的关键词片段
• 遍历分割后的片段，将匹配到的关键词替换为对应样式的<span>组件，其余片段保留为纯字符串

代码实现 #

import React from 'react';

const str = 'The world consists of many different colors. for example: red, green, blue.';
const styles = {
    RED: 'textRED',
    GREEN: 'textGREEN',
    BLUE: 'textBLUE',
};

const formatStyledString = (inputStr, styleMap) => {
    // 提取所有样式关键词并转为小写，用于构建正则
    const keywords = Object.keys(styleMap).map(key => key.toLowerCase());
    // 构建带单词边界的正则，实现全局、不区分大小写匹配
    const matchRegex = new RegExp(`\\b(${keywords.join('|')})\\b`, 'gi');
    
    // 分割字符串，保留匹配项和非匹配项
    const splitParts = inputStr.split(matchRegex);
    
    // 遍历处理每个片段
    return splitParts.map((part, index) => {
        const lowerCasePart = part.toLowerCase();
        // 找到对应样式的键名
        const targetKey = Object.keys(styleMap).find(key => key.toLowerCase() === lowerCasePart);
        
        if (targetKey) {
            // 返回带样式的span组件，用index作为唯一key
            return <span className={styleMap[targetKey]} key={index}>{part}</span>;
        }
        // 非匹配片段直接返回字符串
        return part;
    });
};

// 组件使用示例
const StyledColorText = () => {
    return <div>{formatStyledString(str, styles)}</div>;
};

export default StyledColorText;

关键点说明 #

• 正则中的\\b用于匹配单词边界，避免误匹配包含目标关键词的更长单词（如"reddish"不会被错误替换）
• 正则标记gi确保全局搜索且不区分大小写，满足需求中的大小写不敏感匹配
• 用片段的index作为组件的key，保证React列表渲染的性能和正确性
• 保留原字符串中关键词的大小写显示，仅在匹配时统一转为小写判断

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