如何用正则提取CSS rotate属性中括号内的有理数并返回单个数值？

嘿，我来帮你搞定这个提取角度的需求！你的原正则之所以会捕获到带左括号的内容，是因为把(包含进了捕获组里，而且前面的.*其实没必要——我们可以直接精准匹配rotate()部分，只捕获数字部分。

优化后的正则方案 #

我们调整正则表达式，把括号排除在捕获组之外，同时精准匹配支持整数和小数的数字：

// 用正则字面量更简洁，避免过多转义
const re = /rotate\(\s*(\d+\.?\d*)\s*deg\)/;
const transform = "rotate(33.8753deg) translateZ(0px)";
const match = transform.match(re);

提取纯数值并转为数字 #

匹配结果里，match[1]就是不带括号的纯数字字符串，我们只需要把它转为数值类型即可：

if (match) {
  const degRate = parseFloat(match[1]); // 得到 33.8753（数值类型）
  console.log(degRate);
} else {
  // 处理没有匹配到rotate的情况，比如返回0或者null
  console.log("没有找到rotate角度");
}

封装成函数直接返回数值 #

如果你想直接返回单个数值而不是数组，可以封装成一个工具函数，调用起来更方便：

function getRotateAngle(transformStr) {
  const regex = /rotate\(\s*(\d+\.?\d*)\s*deg\)/;
  const result = regex.exec(transformStr);
  // 匹配到就返回数值，没匹配到返回null（或者你需要的默认值，比如0）
  return result ? parseFloat(result[1]) : null;
}

// 使用示例
const transform = "rotate(33.8753deg) translateZ(0px)";
const angle = getRotateAngle(transform);
console.log(angle); // 输出 33.8753

为什么这个正则有效？ #

• rotate\(：精准匹配rotate(，\(是转义后的左括号（括号在正则里是特殊字符）
• \s*：匹配0个或多个空格（兼容rotate( 33.8753deg)或者rotate(33.8753 deg)这种带空格的情况）
• (\d+\.?\d*)：捕获数字部分，\d+匹配1个或多个整数，\.?匹配可选的小数点，\d*匹配可选的小数部分
• \s*deg\)：匹配0个或多个空格，然后是deg)

这样就能精准捕获到不带括号的纯数字，再转成数值就是你想要的结果啦！

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