Question

Possible Duplicates:
Parsing CSS in JavaScript / jQuery
Parsing CSS string with RegEx in JavaScript

How can I find out if a string contains CSS rules?

Example rules:

selector {
  property:value;
}


selector { property:value; }

selector{property:value}

...

Basically I want to find out if a text block represents either PHP + HTML or CSS code.

One way to do this – I was thinking to trim the text, then match the first character of the text with #, . or a CSS selector such as body, p etc. DO you think it’s a good idea?

Answer 1

tldr; Consider using a proper CSS parser, such as JSCSSP, for final validation.

It depends on the goal and a regular expression might be entirely invalid.

If this is just “attempting” to see if it “could” contain CSS selectors, then I might be inclined to try an overly-broad match, which will fail is there is anything complicated the CSS string values (like “}”) or there are CSS comments, and will accept a wide range of input that is not valid CSS:

(?:\s*\S+\s*{[^}]*})+       // use anchored

Likewise, an expression that should detect most simple HTML (however invalid) with tags, and only unlucky cases of CSS (matches in comments or CSS strings or crazy child selectors):

<(?:br|p)[^>{]*>|</\w+\s*>   // use case-insensitive

Happy coding.

Also see: Parsing CSS in JavaScript / jQuery