正则表达式从包含多个类的单个字符串匹配 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-外页

• 页脚.footer-inner p.intro

• .genericTxt

Answer 1

当且仅当没有任何嵌套的花括号，以下应该有效：

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

这里是a demo！

请注意，我引用 this question 作为有效 CSS 类名正则表达式。

编辑

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

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

这里是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