JavaScript正则表达式以字符串形式获取所有匹配项

Question

I want to get an array of matches within a string. Currently, my string is a media query. I removed all new lines in the media query, so one media query might look like this:

@media (max-width: 1200px) { .container { padding-left: 0px; } .bundles {padding-right:10px} }

What I want to do is get all the classes from the media query including their style attributes. So I would like an array that look as follows:

[".container { padding-left: 0px; }", ".bundles {padding-right:10px}"]

This is my attempt:

var identifiers = mediaQuery.match(/\.(.*)}/);

I was under the assumption match would give me all matches. However I am only getting one match, so I must be doing something wrong.

Answer 1

Try this:

/\.\w+\s*\{[^\}]+\}/

Note that it will find only simple classes, and not ids or any complex css selectors. Since you wrote classes in your question, the regex should be fine. If you need more complex matches, then improve your question ans I'll improve my answer :)

Answer 2

You need to use g (for global) identifier as in

var identifiers = mediaQuery.match(/\.(.*?)}/g);

See the documentation here . Also, as mentioned in the comments by @chiliNUT, you need to use .*? instead of .* in order for your regex not be greedy. See here for more.