如何正则表达式从变换值旋转属性

Question

假设我有一个 css 转换属性，如下所示：

scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)

我需要从属性中删除子字符串 rotateX(50) rotateY(20) rotateZ(10) 并获取 3 个值 50、20 和 10 作为数组

你会如何使用 javascript 来做到这一点？

Answer 1

使用这个正则表达式 rotateX\((\d+)\)\s+rotateY\((\d+)\)\s+rotateZ\((\d+)\);

var transform = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)';
var match = transform.match(/rotateX\((\d+)\)\s+rotateY\((\d+)\)\s+rotateZ\((\d+)\)/);
var arr = match.slice(1, 4);

Answer 2

试试这个脚本：

var txt = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)';

var array = txt.match(/\(\d+(?=\))/g).map(function(x){return x.slice(1)});
document.write(array);

var new_text = txt.replace(/\).* /, ') ');
document.write('<br>' + new_text);

希望对您有所帮助。

Answer 3

我会使用 3 个单独的正则表达式，因此无论旋转顺序如何它都可以工作声明。这个例子使用 ES6 destructuring 为简洁起见，但您可以使用临时变量轻松地在 ES5 中编写它保留 .match 个结果。

var transformString = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)';

// The first variable receives the entire match which we will later remove from
// transformString. The second variable receives the match group, the numeric
// value inside the parentheses 
var [xText, xValue] = transformString.match(/\srotateX\((\d+)\)/i);
var [yText, yValue] = transformString.match(/\srotateY\((\d+)\)/i);
var [zText, zValue] = transformString.match(/\srotateZ\((\d+)\)/i);

// remove rotate commands
[xText, yText, zText].forEach(function (text) {
  transformString = transformString.replace(text, '');
});
var values = [xValue, yValue, zValue];
console.log(transformString, values);

请注意，我们捕获的数字是这些数字的字符串表示形式，而不是实际数字。如果您需要它们是数字，您可以使用 .map 将它们转换为数字。

values = values.map(function (n) {
  return +n;
});

如何正则表达式从变换值旋转属性

How to regex rotate properties from transform value

javascript

css

regex

css-transforms