使用正则表达式 (javascript) 解析 css3 选择器

Question

如果有人以前看过这个问题，请链接，也许我正在搜索错误的东西。除了解析 css 文件的结果外，我什么也得不到。基本上，我有一个选择器数组，比如

[".thislink", "#myid"].

我希望传递任何格式为 css3 选择器的字符串选择器，例如：

a.thislink:not(.ignore)[href^=http://]

放入一个 .match 并将其拆分为一个选择器数组，理想情况下：

[a, .thislink, :not(.ignore), [href^=http://]]

我可以循环通过。然后，我将在任何 :not() 选择器上使用相同的细分来获得第二个“not”数组，我可以将其与我原来的单个选择器数组进行匹配。

标签、类、ID、attr 和 :not 选择器应该是我所需要的。我想我自己可以弄清楚如何分解[attr=val] 和:not(selectorshere)。

PS： 我知道在字符串选择器中匹配我的原始数组值很容易，但是，我 实际上 没有选择器的 array。需要几段来解释我为什么要这样做，所以相信我，我做不到 =)

Answer 1

以防万一您找不到足够的正则表达式，我建议您使用 JavaScript 解析器生成器，如 PEG.js*。有一个 PEG.js 的online version 允许您修改语法，然后在对结果满意后下载解析器。

[ * ] PEG - Parsing Expression Grammar

如需语法帮助，请咨询W3C's working draft on CSS3 syntaxW3C's recommendation on Selectors Level 3。

我花时间尝试并为单个选择器（元素/id/attr/class/pseudo）提出了简化的语法。您可能会想在这里和那里重新审视它并对其进行改进。

/*
 * PEG.js grammar
 */
start      = element? hash? (class / attr / pseudo)*
element    = '*' / ident

ident      = i:(nmstart) j:(nmchar*) {return i + j.join('');}
hash       = h:('#' ident) {return h.join('');}
class      = c:('.' ident) {return c.join('');}
attr       = a:('[' (b:[^\]]+ {return b.join('');}) ']') {return a.join('');}
pseudo     = p:(':' function) {return p.join('');}

nmstart    = [a-z] / nonascii
nmchar     = [a-z0-9-] / nonascii
function   = f:(ident '(' body ')') {return f.join('');}
body       = b:[^\)]+ {return b.join('');}

nonascii   = [\x80-\xff]
_          = [ \t\n\r]+ {return '';}