React中如何仅为动态文本内的数字单独应用CSS样式

纯CSS没有匹配文本节点内部分字符的能力，没法直接选中文本里的数字改样式，不用在纯CSS方案上耗时间。最简洁可靠的实现方式是在组件渲染阶段，用正则把传入的动态文本拆分成片段，给匹配到的数字片段包裹带红色样式的标签即可，完全不需要硬编码内容。

修改后的组件代码如下：

const Component = ({ text }) => {
  // 带捕获组的正则拆分字符串，匹配到的连续数字会被保留在拆分结果中
  const contentFragments = text.split(/(\d+)/g);
  return (
    <div>
      {contentFragments.map((fragment, idx) => {
        // 识别当前片段是否为纯数字
        if (/^\d+$/.test(fragment)) {
          return (
            <span key={idx} style={{ color: 'red' }}>
              {fragment}
            </span>
          );
        }
        // 非数字内容直接渲染为纯文本
        return fragment;
      })}
    </div>
  );
};

这个方案的几个优势：

• 逻辑全在组件渲染层，不会修改传入的原始text数据
• 适配任意动态传入的文本，不管数字出现在文本什么位置、出现多少次，都能自动识别标红
• 零第三方依赖，性能开销极低，和直接渲染纯文本几乎没有差异
• 扩展灵活，如果后续需要匹配小数、负数、千分位格式的数字，只要调整对应正则即可，比如要匹配带小数的数字，可以把拆分正则替换为/(\d+\.?\d+)/g

注意：这里遍历片段时用数组索引作为key是完全安全的，因为拆分后的片段顺序和原文本完全一致，不会出现动态重排导致的渲染异常。

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