Извлечь различные преобразования 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

Быстрый пример того, как вы могли бы сделать это, используя регулярное выражение и сводя результаты к объекту:

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"}

В этом В версии мы перезаписываем значение функции, если оно появляется дважды. Вы можете объединить их вместе, если некоторые свойства могут появляться более одного раза.

Answer 2

На основании комментария Теему:

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