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

试试这个脚本：

＆＃13;

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);

＆＃13;

希望它有所帮助。

Answer 3

我使用3个单独的RegExp，因此无论旋转顺序如何，它都能正常工作声明。此示例使用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;
});

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

3 个答案: