0

From a large minified css file I want to extract the style inside specific media queries. Something like:

.some-class{aaa:bbb;ccc:ddd;}@media (min-width: 500px){.some-other-class{aaa:bbb;ccc:ddd;}}.another-class{aaa:bbb;ccc:ddd;}

The following regex selects the media queries, with a capturing group for the style inside the media query:

regex = new RegExp("@media.\\(min-width:\\d{3,4}px\\){(.+?\\})\\}", "g");

The capturing group result is the part I actually want. But when there are more than one hits how do I access multiple capturing group results. When there is only one the result I am after is the second item in the resulting array, when using str.match(regex);.

Is the only solution using regex.exec(str)[1] in combination with a while loop? Like:

while(result != null){
    result = regex.exec(str)[1];
    resultArr.push(result);
}

I'd much rather use match()...I find that more readable and a more elegant solution, you immediately get an array with you results...although the results I am looking for are only a subset of the results I am getting...

I guess I will have to use the last code snippet I gave, regex.exec(str). Ahh well...
AndrewRMillar
  • 608
  • 1
  • 7
  • 17
  • 2
    `string.match()` does not keep, discards all the captured values. You have to use `RegExp.exec()`. – Wiktor Stribiżew Mar 31 '16 at 20:06
  • I think you forgot a space or `\s` before `\\d{3,4}`. – Michał Perłakowski Mar 31 '16 at 20:08
  • Yes, there must be a `\s*`, or `\s+`. Sl4rtib4rtf4st, have a look at https://jsfiddle.net/3jp5n54q/ - it is a bit shortened version and uses a regex literal notation. – Wiktor Stribiżew Mar 31 '16 at 20:10
  • [`.match` should give you all of the results you want](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match). The first element in the array will be the whole match and any subsequent results (`result[1] -> result[result.length - 1]`) will be the capturing groups. – Mike Cluck Mar 31 '16 at 20:11
  • 1
    @MikeC: Read on: *If the regular expression includes the g flag, the method returns an Array containing all matched substrings rather than match objects. **Captured groups are not returned***. – Wiktor Stribiżew Mar 31 '16 at 20:12
  • @WiktorStribiżew Ah! I missed the "g" flag. My mistake. – Mike Cluck Mar 31 '16 at 20:13
  • @WiktorStribiżew I found that answer but didn't feel this covered my situation as that op wasn't looking for capture groups in multiple hits. But I guess this "If the regular expression includes the g flag, [...]. Captured groups are not returned." gives me my answer, I'll have to use exec(). The string I use in as an example isn't representatieve, the actual string will not have a space at that position. – AndrewRMillar Apr 01 '16 at 06:42
  • The space does not matter, it is covered with `\s*`. The question I linked to contains answers showing how to get all captures "gracefully" (at least with a separate `getMatches` function). – Wiktor Stribiżew Apr 01 '16 at 06:46
  • @WiktorStribiżew Indeed the second answer would cover this situation. I was mainly wondering if you could do a similar thing with match(), but clearly not as is pointed out in the mdn page for match, which I hadn't read... – AndrewRMillar Apr 01 '16 at 09:45

0 Answers0