如何编写正则识别含color/background-image与font-size的自定义CSS属性text？

直接用单一正则处理复杂的颜色、渐变、url() 语法确实容易出现遗漏，更可靠的方式是拆分处理流程：先匹配所有 text 声明，再对每个声明的值做针对性识别和转换。

实现思路 #

1. 先提取所有 text: 开头的CSS声明；
2. 对每个声明的值，从后往前判断末尾是否为合法的字体大小（长度单位或关键字）；
3. 根据识别出的「颜色/背景图部分」和「字体大小部分」，生成对应的原生CSS属性；
4. 针对背景图（渐变、url()）的情况，补充文字背景裁剪的兼容代码。

完整代码实现 #

// 辅助函数：判断字符串是否为合法的字体大小
function isFontSize(value) {
  // 匹配带单位的长度值
  const lengthRegex = /^[\d.]+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/i;
  // CSS内置的字体大小关键字
  const sizeKeywords = new Set(['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'smaller', 'larger']);
  return lengthRegex.test(value) || sizeKeywords.has(value.toLowerCase());
}

// 解析单个text属性的值，生成原生CSS
function parseTextValue(value) {
  value = value.trim();
  let colorBgPart = null;
  let fontSizePart = null;

  // 从后往前匹配末尾的字体大小部分
  const fontSizeMatch = value.match(/\s+([^\s]+)$/);
  if (fontSizeMatch) {
    const candidate = fontSizeMatch[1];
    if (isFontSize(candidate)) {
      fontSizePart = candidate;
      colorBgPart = value.slice(0, fontSizeMatch.index).trim();
      // 如果裁剪后为空，说明整个值就是字体大小
      if (!colorBgPart) colorBgPart = null;
    }
  }

  // 处理仅含字体大小的情况
  if (!fontSizePart && isFontSize(value)) {
    fontSizePart = value;
  } 
  // 处理仅含颜色/背景图的情况
  else if (!fontSizePart) {
    colorBgPart = value;
  }

  // 拼接原生CSS代码
  let css = '';
  if (colorBgPart) {
    // 判断是否为背景图类型（渐变或url）
    if (colorBgPart.startsWith('linear-gradient') || colorBgPart.startsWith('radial-gradient') || colorBgPart.startsWith('url(')) {
      css += `background-image: ${colorBgPart}; -webkit-background-clip: text; background-clip: text; color: transparent;`;
    } else {
      css += `color: ${colorBgPart};`;
    }
  }
  if (fontSizePart) {
    css += ` font-size: ${fontSizePart};`;
  }
  return css.trim();
}

// 主函数：编译整个CSS文本
function compileTextProperty(css) {
  // 匹配所有text: ...; 格式的声明，兼容换行和空格
  return css.replace(/text:\s*([^;]+);/g, (match, value) => {
    return parseTextValue(value);
  });
}

测试示例 #

输入CSS：

.demo {
  text: black;
  text: 2rem;
  text: black 2rem;
  text: linear-gradient(to right, blue, red) 2rem;
  text: url("/image.png") 2rem;
  text: black xx-small;
}

编译后输出：

.demo {
  color: black;
  font-size: 2rem;
  color: black; font-size: 2rem;
  background-image: linear-gradient(to right, blue, red); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem;
  background-image: url("/image.png"); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem;
  color: black; font-size: xx-small;
}

注意事项 #

• 该方案避免了正则无法处理复杂嵌套（如url()内的空格、渐变参数里的逗号）的问题；
• 可根据需求扩展isFontSize函数，添加更多支持的单位或关键字；
• 背景图文字效果需要依赖background-clip: text，添加-webkit-前缀是为了兼容旧版Chrome/Safari。

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