正则表达式匹配 CSS 类名答案

【问题标题】：Regex to match a CSS class name正则表达式匹配 CSS 类名
【发布时间】：2011-09-13 19:39:27
【问题描述】：

我正在尝试编写一个匹配有效 CSS 类名称结构的正则表达式。到目前为止我有这个：

$pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)";

$regex = preg_match_all($pattern, $html, $matches);

但是，类名可以是我的正则表达式不匹配的以下格式：

p.my_class{
}
p.thisclas45{
}

这些只是一些案例，我环顾四周寻找如何在样式块中命名类的规则，但找不到任何东西。有谁知道类命名约定的规则在哪里？

还有其他需要考虑的情况吗？你会用什么正则表达式来匹配一个类名？

我已经使用 PHP DOM Document 类将其缩小为样式块。

【问题讨论】：

你的分隔符在哪里？你是说 CSS 吗？
在 CSS 中，类名以点开头。您的正则表达式不匹配。 :-?
@Tomalak - 抱歉我出于某种原因删除了它们，它是#。 @ Álvaro - 它确实匹配它，因为我有一个 *，它是 . 前面的 0 个或多个字符。
@Abs: 你在追求：(a) classname [你没有这个正确的 atm]； (b) 包括类名的选择器[看起来很对！]；或 (c) 任何选择器 [您缺少大量案例]？
( 和)（以及{}、[] 和<>）可以用作分隔符，即"([A-Za-z]*\.[A-Za-z]+\s*{)" 是完全有效的模式。如果使用另一个分隔符，则不需要将整个模式放在()中，即它可以是(something)或#something#，并且不需要写#(something)#，因为您将使用整个模式作为子模式在这种情况下。

标签： php css regex

【解决方案1】：

看看http://www.w3.org/TR/CSS21/grammar.html#scanner

根据这个语法和帖子Which characters are valid in CSS class names/selectors?，这应该是扫描css类的正确模式：

\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{

注意：标签名称不需要作为 css 中类的前缀。只需.hello { border: 1; } 也有效。

【讨论】：

哇，真快！我用一些变体测试了上面的内容，包括无效的类名，它可以工作。非常感谢！
用[\w-] 代替[_a-zA-Z0-9-] 怎么样？ \w 匹配任何单词字符，即任何字母或数字或下划线字符（来自docs）。
s/prefix for classes/prefix for selectors/
这与.modern-trade 不匹配。应该是\.-?[_a-zA-Z\-]+[\w\-]*\s*\{。
谢谢，对我来说这样就可以了 :) 但是这个正则表达式没有考虑一些奇怪的规则——转义字符和 unicode 字符。这是一个很好的阅读：mathiasbynens.be/notes/css-escapes

【解决方案2】：

这个正则表达式：

/(\w+)?(\s*>\s*)?(#\w+)?\s*(\.\w+)?\s*{/gm

将匹配以下任何一项：

p.my_class{}
p.thisclas45{}
.simple_class{}
tag#id.class{}
tag > #id{}

您可以在 RegExr 上使用它，here。

【讨论】：

@Tomalak 你的意思是捕获组吗？请看一下正则表达式链接，“替换选项卡”显示了它们的位置：$1 是标签，$2 是祖先（>），$3 是 id，$4 是类名（没有'{'）。如果您指的是完整的正则表达式，则为 /(\w+)?(\s*>\s*)?(#\w+)?\s*(\.\w+)?\s*{/gm
不，你的分隔符，正如我所说的。您没有将它们包含在您的答案中。分隔符是表达式的一部分，而且有足够多的人没有正确使用它们，以至于将它们排除在答案之外是很危险的。
但它不会匹配这样的内容：.icon-something:before { content: "\e935"; }