React JS：将CS:GO玩家等级的颜色标记转换为带样式Span标签

我之前做过类似的CS:GO玩家数据展示需求，要把带内置颜色标识的等级字符串转成React里带样式的Span标签，其实可以通过字符串解析+React元素动态生成来实现，具体步骤如下：

1. 建立颜色映射表 #

首先把游戏里的颜色标识（比如default、pink）和对应的十六进制颜色值做一个映射，方便后续替换：

// 可以根据CS:GO实际颜色扩展这个映射表
const colorMap = {
  default: '#ffffff',
  pink: '#ffb6c1',
  red: '#ff4444',
  blue: '#4488ff',
  green: '#44dd44'
};

2. 编写解析函数，拆分颜色片段 #

用正则表达式匹配每一段{颜色标识}文本内容的结构，把字符串拆分成「颜色+对应文本」的片段数组：

const parseColoredString = (inputString) => {
  // 正则匹配 {color}xxx 的结构，捕获颜色标识和文本内容
  const regex = /{(\w+)}(.*?)(?={|$)/g;
  const matches = [];
  let match;

  // 遍历所有匹配结果
  while ((match = regex.exec(inputString)) !== null) {
    const [_, colorKey, text] = match;
    // 如果颜色不在映射表里，默认用default的颜色
    const color = colorMap[colorKey] || colorMap.default;
    matches.push({ color, text });
  }

  return matches;
};

3. 在React组件中渲染解析结果 #

把解析后的片段数组转换成React的<span>元素，每个span对应一段带颜色的文本：

import React from 'react';

const PlayerLevel = ({ levelString }) => {
  const coloredSegments = parseColoredString(levelString);

  return (
    <span className="player-level">
      {coloredSegments.map((segment, index) => (
        <span 
          key={index} 
          style={{ color: segment.color }}
        >
          {segment.text}
        </span>
      ))}
    </span>
  );
};

// 使用示例：
// <PlayerLevel levelString="{default}[{pink}Master{default}]" />

额外处理：处理非标准格式情况 #

如果输入的字符串可能存在格式错误（比如未闭合的{}），可以在解析函数里加个兜底逻辑，比如如果没有匹配到任何片段，直接返回原字符串的默认颜色片段：

const parseColoredString = (inputString) => {
  const regex = /{(\w+)}(.*?)(?={|$)/g;
  const matches = [];
  let match;

  while ((match = regex.exec(inputString)) !== null) {
    const [_, colorKey, text] = match;
    const color = colorMap[colorKey] || colorMap.default;
    matches.push({ color, text });
  }

  // 如果没有匹配到任何片段，返回原字符串的默认颜色片段
  if (matches.length === 0) {
    return [{ color: colorMap.default, text: inputString }];
  }

  return matches;
};

这样处理后，像{default}[{pink}Master{default}]这样的输入，就会被渲染成：

<span class="player-level">
  <span style="color: #ffffff">[</span>
  <span style="color: #ffb6c1">Master</span>
  <span style="color: #ffffff">]</span>
</span>

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