Dreamweaver中的正则表达式以注释CSS

Question

I am trying to convert a template from responsive to non-responsive (I know, seems crazy but...) so I was told by the template developer to comment out or remove all the @media css in the file. So I am looking for a regular expression that will go through a css file and find:

@media { some css here }} and replace it with

/* @media { same css as above }} */

I have tried variation on some examples that are similar on the webs but to no avail.

Many thanks, Houston

Answer 1

This regex should do the trick:

@media.*?{\\s*(?:.*?{.*?}\\s*)*?}

And then use the following string for the replacement:

/* $0 */

Also, for this regex to work you must use the "dot matches all" option for regular expressions. In most languages this is done with the /s modifier (or in something like Notepad++ there's a checkbox option that says ". matches newline").

If you are using something like Notepad++ to perform the replacement, you'll want the escaped version:

@media.*?{\\s*(?:.*?\\{.*?\\}\\s*)*?\\}

Regex Explanation:

The @media.*?{ part matches up to the opening brace of the media query. Then there's \\s* to match possible white-space before the start of the inner CSS. Next, (?:.*?{.*?}\\s*)*? will match all of the inner CSS. Finally, the end of the media query is matched with the closing brace } .