Regex do not capture group in JavaScript

Question

I wrote regular expression

/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g

For given string

translateX(381px) translateY(-94px)

To capture translateX and translateY values. Tested it by regex101.com service, it works well there. But, when I try it in JavaScript it capture translateX value which is 381 but not capture translateY which is -94. Do you have any ideas why is this happening?

regex101

https://i.sstatic.net/Nuj5X.png

JavaScript exec

console.log(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g.exec("translateX(381px) translateY(-94px)"));

Using matchAll gives the same result.

JavaScript matchAll

console.log("translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g).next().value.groups);

Consider adding the JS used into the question as a minimal reproducible example? — evolutionxbox
– evolutionxbox, Commented Jun 9, 2021 at 16:45
FYI, {0,1} is usually written as ? to indicate an optional pattern. — Barmar
– Barmar, Commented Jun 9, 2021 at 16:47
You're only calling .next() once in the last example, so you only get the first match. Try converting it to an array and you'll get all of the matches. — Barmar
– Barmar, Commented Jun 9, 2021 at 16:48

Barmar · Accepted Answer · 2021-06-09 17:02:33Z

1

You're just calling .next() once, so you only get the first match. You need to loop over all the results of .matchAll().

for (m of "translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g)) {
  console.log(m.groups);
}

You can also convert the iterator to an array.

console.log([..."translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g)]
    .map(m => m.groups))

answered Jun 9, 2021 at 17:02

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SINCOS · Accepted Answer · 2021-06-09 17:10:45Z

0

You can use this to find both values in one go:

/translateX\((?<X>-?\d+)px\).*translateY\((?<Y>-?\d+)px\)/g

console.log(/translateX\((?<X>-?\d+)px\).*translateY\((?<Y>-?\d+)px\)/g.exec("translateX(381px) translateY(-94px)"));

answered Jun 9, 2021 at 17:10

SINCOS

896 bronze badges

1 Comment

Vlad Over a year ago

Yes, but I want to write expression that finds translateX and translateY regardless of their position. Like translateX(n) translateY(n) or translateY(n) translateX(n) - which is valid css transform values.

Collectives™ on Stack Overflow

Regex do not capture group in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related