从转换字符串中提取不同的 css 转换？

Question

这里是一个例子CSS 转换字符串：

rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)

从这个字符串我想

每次转换得到一个字符串
获取具有我可以访问的属性的对象

我该怎么做？

我最好的想法是使用 RegEx，但我还没有想出有效的 RegEx 解决方案：

[a-z]+?\([\-a-z0-9\s]*?\)

https://regex101.com/r/Ycjuxz/1

也欢迎大家对不使用RegEx的解决方案有不同的想法

Answer 1

基于 Teemu 的评论：

const text=`rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)`;
const rows = text.split('\n');
const transformations = rows.reduce((acc, cur) => {
  const key = cur.substring(0, cur.indexOf('('));
  const value = cur.replace(key, '').replace('(', '').replace(')', '');
  acc[key] = value;
  return acc
}, {});

console.log(transformations);

Answer 2

一个快速示例，说明如何使用正则表达式执行此操作并将结果简化为对象：

function parseTransform(transform) {
    return Array.from(transform.matchAll(/(\w+)\((.+?)\)/gm))
        .reduce((agg, [, fn, val]) => ({
            ...agg,
            [fn]: val
        })
        , {});
}

const res = parseTransform(`rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)`);

这个的输出是

{rotate: "-10 50 100", translate: "-36 45.5", skewX: "40", scale: "1 0.5"}

在此版本中，如果函数出现两次，我们将覆盖该函数的值。如果某些属性可以多次出现，您可以将它们合并在一起。

从转换字符串中提取不同的 css 转换？

Extract the different css transformations from a transform string?

javascript

css

regex

css-transforms