正则表达式匹配包含多个类的单个字符串的css类名

Question

我有一个包含多个css类的长字符串。使用正则表达式我想匹配每个类名，因为我需要像这样替换这些类名：

<span>CLASSNAME</span>

我已经尝试了几个小时来提出一个解决方案，但我认为我很接近某些类名，但是我无法从匹配中排除结束大括号。

以下是我一直在进行测试的示例字符串：

#main .items-Outer p{ font-family:Verdana; color: #000000; font-size: 50px; font-weight: bold; }#footer .footer-inner p.intro{ font-family:Arial; color: #444444; font-size: 30; font-weight: normal; }.genericTxt{ font-family:Courier; color: #444444; font-size: 30; font-weight: normal; }

这是我到目前为止提出的正则表达式：

((^(?:.+?)(?:[^{]*))|((?:\})(?:.+?)(?:[^{]*)))

请查看我附上的截图，因为它会更清楚地显示我得到的匹配。我的问题是，我显然希望从任何匹配中排除大括号。

澄清一下，我所追求的比赛的例子是：

• main .items-Outer p

• footer .footer-inner p.intro

• .genericTxt

Answer 1

当且仅当不存在任何嵌套花括号时，以下内容应该有效：

/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})/

此处a demo！

请注意，我为有效的CSS-class-name正则表达式引用了this question。

修改

我刚刚阅读了您的评论，澄清您希望匹配整个选择器，而不仅仅是类名。在这种情况下，试试这个，虽然我对其稳健性没有信心：

/[^}]*(?=\{|$)/

此处a demo of that one。

Answer 2

这是

的正则表达式

(?:(\}|^)).*?(?:\{)

Answer 3

假设str包含您的CSS，则使用以下正则表达式：

str.match(/(?:#\w+\s+)?\.[\w-]+(?:\s+\w+\s*\.\w+|\s+\w+)?/ig)

返回：

["#main .items-Outer p", "#footer .footer-inner p.intro", ".genericTxt"]

正则表达式是：

(?:#\w+\s+)?      -- optional leading CSS id, i.e. #abc
\.[\w-]+          -- CSS classname, i.e. .ab-c
(?:
    \s+\w+\s*\.\w+  -- optional CSS elt followed by classname, i.e. p.abc
|                   -- or
    \s+\w+          -- optional CSS elt, i.e. p
)?

请参阅demo