How to extract value using regex javascript in a generic form

Question

I have these values:

skew(1deg)
rotate(3)
skewY(10deg)
matrix(0, 0, 0, 0, 0, 0)

matrix could also be:

matrix(1, 2, 3, 4, 5, 6)

All i want to do is using regex generically extracting the exact values from above.

What i tried:

/skew\([0-9]+[a-zA-Z]*\)/g
/rotate\([0-9]+[a-zA-Z]*\)/g
/skewY\([0-9]+[a-zA-Z]*\)/g
/matrix\([0-9]+[a-zA-Z]*\)/g

so using the css properties like skew, rotate, skewY and matrix, i need to pass in these properties but want the value from the css property till the end character ")" generically, how can this be achieved.

Why regex? is there a pattern you need only a specific match? — Jonathan Applebaum, Jan 30 '20 at 17:47
the css value specifically needs to be passed, but from the end of the css value being passed i need to get the values from the end of the css value to the end character which is ")". it is looking for a specific match as skew, rotate and other properties are being passed. But generically i need to get the value also from "(" and ")" generically, or has this regex need to be done specifically on every css property or value? — redoc01, Jan 30 '20 at 17:50

The fourth bird · Accepted Answer · 2020-01-30T18:30:00.673

You could make use of an alternation to match one of the options. If you want the value between the parenthesis you could use a capturing group.

\b(?:skewY?|rotate|matrix)\(([^()]+)\)

\b Word boundary
(?: Non capturing group
- skewY?|rotate|matrix Match either skew, skewY, rotate or matrix
) Close group
\( Match(- ([^()]+) Capture group 1, match 1+ times any char other than ( or )
\) Match )

Regex demo

If your intent is to use only the allowed characters from the patterns that you tried, you could use:

\b(?:skewY?|rotate|matrix)\([0-9]+[a-zA-Z]*(?:, ?[0-9]+[a-zA-Z]*)*\)

Regex demo

const regex = /\b(?:skewY?|rotate|matrix)\(([^()]+)\)/;
["skew(1deg)",
  "rotate(3)",
  "skewY(10deg)",
  "matrix(0, 0, 0, 0, 0, 0)"
]
.forEach(s => console.log(s.match(regex)[1]))

Jonathan Applebaum · Answer 2 · 2020-01-30T18:33:15.310

1

You can use such a generic pattern:

skew(.|\n)*?\) | rotate(.|\n)*?\) | matrix(.|\n)*?\)

Add each match to an array and when you finish remove the unnecessary strings at the end and at the beginning (i.e skew(...rotate(...) using a simple Replace() function.

LIVE DEMO

According to comment for this answer, Javascript Flavor for the regex pattern:

skew([^])*?(\))|rotate([^])*?(\))|matrix([^])*?(\))

edited Jan 30 '20 at 18:33

answered Jan 30 '20 at 18:01

Jonathan Applebaum

5,738
4
33
52

1

Please, DON'T use `(.|\n)`, use `[^]` in javascript. – Toto Jan 30 '20 at 18:12
@Toto Thank you for your comment! a javascript flavor pattern was added to the answer – Jonathan Applebaum Jan 30 '20 at 18:33

score 0 · Answer 3 · answered Jan 30 '20 at 18:05

0

I found this on stack overflow:

Regular Expression to get a string between parentheses in Javascript

And works:

var regExp = /\(([^)]+)\)/;

So gets the value between the brackets also.

answered Jan 30 '20 at 18:05

redoc01

2,107
5
32
64

How to extract value using regex javascript in a generic form

3 Answers3