通过regex解析CSS [英] Parsing CSS by regex

问题描述

我正在创建一个CSS编辑器，并尝试创建一个可以从CSS文档获取数据的正则表达式。这个正则表达式如果我有一个属性，但我不能得到它为所有属性工作。我在PHP中使用preg / perl语法。

I'm creating a CSS editor and am trying to create a regular expression that can get data from a CSS document. This regex works if I have one property but I can't get it to work for all properties. I'm using preg/perl syntax in PHP.

(?<selector>[A-Za-z]+[\s]*)[\s]*{[\s]*((?<properties>[A-Za-z0-9-_]+)[\s]*:[\s]*(?<values>[A-Za-z0-9#, ]+);[\s]*)*[\s]*}

测试用例

Test case

body { background: #f00; font: 12px Arial; }

预期结果

Expected Outcome

Array(
    [0] => Array(
            [0] => body { background: #f00; font: 12px Arial; }
            [selector] => Array(
                [0] => body
            )
            [1] => Array(
                [0] => body
            )
            [2] => font: 12px Arial; 
            [properties] => Array(
                [0] => font
            )
            [3] => Array(
                [0] => font
            )
            [values] => Array(
                [0] => 12px Arial
                [1] => background: #f00
            )
            [4] => Array(
                [0] => 12px Arial
                [1] => background: #f00
            )
        )
)

实际结果

Real Outcome

Array(
    [0] => Array
        (
            [0] => body { background: #f00; font: 12px Arial; }
            [selector] => body 
            [1] => body 
            [2] => font: 12px Arial; 
            [properties] => font
            [3] => font
            [values] => 12px Arial
            [4] => 12px Arial
        )
    )

推荐答案

这只是对于一个单一的规则似乎太复杂了表达。嗯，我敢肯定，使用正确的程度，高级用户可以创建正确的正则表达式。但是，你需要一个更高级的用户来调试它。

That just seems too convoluted for a single regular expression. Well, I'm sure that with the right extentions, an advanced user could create the right regex. But then you'd need an even more advanced user to debug it.

相反，我建议使用正则表达式拉出片断，然后分片分别。例如

Instead, I'd suggest using a regex to pull out the pieces, and then tokenising each piece separately. e.g.,

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

然后你最终得到选择器和属性在单独的字段，然后拆分这些。 （即使选择器将有乐趣解析。）请注意，即使这将有痛苦，如果}的可以出现在引号或内容。你可以再次将它转出来避免这种情况，但是最好在这里避免使用正则表达式，并且通过一次解析一个字段来处理它，也许使用递归下降解析器或者yacc / bison或者无论如何。

Then you end up with the selector and the attributes in separate fields, and then split those up. (Even the selector will be fun to parse.) Note that even this will have pains if }'s can appear inside quotes or something. You could, again, convolute the heck out of it to avoid that, but it's probably even better to avoid regex's altogether here, and handle it by parsing one field at a time, perhaps by using a recursive-descent parser or yacc/bison or whatever.

这篇关于通过regex解析CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！