Javascript - 正则表达式匹配多行样式标记中的通用选择器(*)

时间:2017-11-08 11:47:53

标签: css regex

我在样式标记中遇到了以下带有通用选择器的html代码。

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

我正在寻找一个有效的正则表达式来匹配通用选择器。 我使用过/<style>↵\* {.*?<\/style>/g但没有成功。问题是它是一个多行字符串,它似乎不适用于多行字符串。

3 个答案:

答案 0 :(得分:1)

这是一个更好的正则表达式:

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

它匹配通用选择器,括号和之间的所有内容。即使脚本标记之间存在其他规则,它也能正常工作。

  • [*]一位小明星
  • \s*任何空白
  • {[^}]*}一个开口括号,除了一个右括号,一个右括号

答案 1 :(得分:0)

解析HTML的正确方法是HTML解析器(如DOMParser())而不是正则表达式。在非常有限的范围内,正则表达式可能会有所帮助,但它对可维护性有害,因为随着时间的推移,HTML可能会变得更复杂,并且不是可以正则表达式解析的简单语言。

话虽如此,在这种情况下,如果格式与您盯着完全一样,那么就可以进行匹配:

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

让我们分解一下:

  • <style> - 显然它需要从这个文字
  • 开始
  • \n\*\s{\n新行,字符*,空格,字符{和新行
  • (\s|.)* - 捕获空间或字符(0或更多)的捕获组 - 基本上是您想要的文本
  • \n - 该捕获组的结尾是新行
  • }\n - 字符}和行尾
  • <\/style> - 显然需要以这个字面结束(介意,/必须被转义)

我可以构建更强大的正则表达式,但是对于强大的解决方案,正如我已经说过的那样: HTML PARSER是一种方法!

答案 2 :(得分:0)

你也可以试试这个正则表达式

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

测试http://www.gethifi.com/tools/regex