CODEWITHSUNDEEP
cssregex
akhilesh
akhilesh

Reputation: 13

Javascript - regex to match universal selector(*) in a multi-line style tag

I have encountered following piece of html code with universal selector in the style tag.

<html>
<head>
<style>
* {
font-family:Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>...</body>
</html>

I am looking for an efficient regex to match the universal selector. I have used /<style>↵\* {.*?<\/style>/g but with no success. The problem is it's a multi-line string and it seems to not work with multi-line strings.

Upvotes: 1

Views: 249

Answers (3)

Znaneswar
Znaneswar

Reputation: 3387

You may also try this regex

/<style((.|\n|\r)*?)<\/style>/g

tested http://www.gethifi.com/tools/regex

Upvotes: 1

Lorenz Meyer
Lorenz Meyer

Reputation: 19945

This is a better regex:

/([*]\s*{[^}]*})/gm

It matches the universal selector, the brackets and everything between. It works even if there are other rules between the script tags.

  • [*] a litteral star
  • \s* any whitespace
  • {[^}]*} an opening bracket, anything but a closing bracket, a closing bracket

Upvotes: 1

CodeSmith
CodeSmith

Reputation: 3207

Right way to parse HTML is HTML parser ( like DOMParser() ) not regex. In very limited scope regex can be helpful but it's bad for maintainability , since HTML might grow more complex than that over time and is not a simple language that can be regex parsed.

That being said, in this case, if format is exactly as you stared this will do the trick of matching:

/<style>\n\*\s{\n(\s|.)*\n}\n<\/style>/gm

Let's break it down:

  • <style> - obviously it needs to start with this literal
  • \n\*\s{\n new line, character *, space, character { and new line
  • (\s|.)* - capture group that captures either spaces or characters (0 or more of those) - basically the text you want
  • \n - end of that capture group is new line
  • }\n - character } and end of line
  • <\/style> - obviously needs to end with this literal (mind, / has to be escaped)

I can build you more robust regex but for robust solution, as I already stated: HTML PARSER is a way to go!

Upvotes: 0

Related Questions