CODEWITHSUNDEEP
javascriptstringcss-transformscss-calc
Julian
Julian

Reputation: 826

Regular Expression to match the value of a CSS calc inside a CSS transform

I'm trying to extract the values of CSS transform strings using this regular expression (\w+)\(([^)]*)\) like translateX(10px) or translateY(calc(-50% - 100px)).

It works great on simple transform values like: translateX(10px) will returns translateX and 10px

But if I try to parse a CSS calc value: translateY(calc(-50% - 100px)) it returns translateY and calc(-50% - 100px

Notice the missing ) at the end of calc(-50% - 100px ?

For now I managed to fix this problem by using this regular expression /(\w+)(\([^)]*\)+)/g, that returns the values with the parenthesis and then slice the results to remove them :

translateY(calc(-50% - 100px)) returns: translateY and (calc(-50% - 100px)); then (calc(-50% - 100px)).slice(1, -1) returns: calc(-50% - 100px);

But this introduce an extra step and I was wondering if it was possible to do all that in one single Regular Expression.

Upvotes: 1

Views: 109

Answers (0)

Related Questions