正则表达式以匹配基本媒体查询

Question

I am struggling to get my regular expression to match the following string:

(max-width: 320px) 280px

I would like my regex to split the string into two parts like so:

console.log(parts[0]) // (max-width: 320px)
console.log(parts[1]) // 280px

This is what I currently have:

(\(.+\))\s?(0-9a-z)+

I haven't written a regular expression in a while so I am a little rusty but for some reason, I cannot get it to match the final part ie 280px .

Can anyone advise what I am doing wrong?

Additional Information

I do not need anything complex, the purpose of this regex is to match media queries used in the sizes attribute of the an img element.

As far as I can see, it simply needs to do the following:

1. Match anything within the brackets (including the brackets)
2. Match an optional space
3. Match the ending alphanumeric value (can be px/em/vw)

Answer 1

My guess is that you expression is just fine, maybe we'd just add a char class to it:

(\(.+\))\s*([0-9a-z]+)

The expression is explained on the top right panel of this demo if you wish to explore/simplify/modify it.