css - 什么是正则表达式来删除 css 保持字体大小

Question

我有一个大的 css 文件，我需要从中删除除选择器和字体大小属性以及花括号之外的所有规则。RegEx 会选择其他所有内容吗？

该文件一直是这样格式化的。

.details h2 {margin: -14px 0 0 0; padding: 0 20px 24px 20px; font-size: 12px; color: #474747;}

我需要它以这样的方式结束。

.details h2 {font-size: 12px;}

Answer 1

我可以使用 Sublime Text：

Find: \{.*(font-size\:\s*\d+px\;).*\}?
Replace: \{ $1 \}

如果 css 分成多行（应该是 ;)），那么它需要更多的努力。好吧，我可能会考虑两个或三个单独的替换操作。

Answer 2

好吧，要做到这一点 100% 铁定，您可能必须编写一个 CSS 解析器，这不是在公园里散步。但是，对于大多数情况，您可以使用正则表达式解决此问题。真正的关键是不要尝试在单个正则表达式中做太多事情（一个常见的错误）。我的解决方案涉及两个单独的正则表达式：一个解析规则，另一个从声明块中选择“字体大小”声明。你没有说你有什么语言或工具可用，但我用 JavaScript 实现了这个：

var css = $('style').text();   // this will grab the CSS of the page it's on...you can
                               // use whatever CSS you want, of course; this is just
                               // a string containing CSS

// join all lines by removing carriage returns; otherwise we'll run into
// lots of problems trying to grok rules that span multiple lines
css = css.replace( /\n/g, '' );

// match all rules, and separate into selectors and declarations
css = css.replace(/\s*([^{]*)\s*\{(.*?)\}/g, function(match,selector,declarations) {
    // see if font-size is among the declarations; if so, capture it's value
    var fsMatch = declarations.match( /\bfont-size\s*:\s*([^;]+?)\s*(;|$)/i );
    // if font-size is present, return only that declaration, otherwise return empty
    return fsMatch ?
        selector + ' { font-size: ' + fsMatch[1] + '; }\n' :
        '';
});

// now the 'css' variable contains the CSS you're looking for

请注意，此解决方案也可以生成非常干净的 CSS。

在此处查看一个实时示例：

http://jsfiddle.net/yLjCe/2/