javascript - 如果需要，删除 CSS 选择器及其相关属性

Question

我正在尝试删除特定的 CSS 选择器，如果属性列表的选择器不多于脚本将其删除...

我能够让脚本的一部分工作:http://jsfiddle.net/jnbdz/MarRr/5/

代码如下:

$$('button')[0].addEvent('click', function(){

var css = document.id('css').get('text');

var newCss = css.replace(/(\n|\r|\s\s)/g, "")
.replace(/(,\s*body\s*(?={)|,\s*body\s*(?=,)|body\s*,|,\s*head\s*(?={)|,\s*head\s*(?=,)|head\s*,)/gi, "")
.replace(/(body\s*(?={)|head\s*(?={))/gi, "")
.replace(/(^\{[^}]*?\}|\}\s*\{[^}]*?\})/gim, "");

document.id('cleancss').set('text', newCss);

});

问题是，如果我删除换行符，我编写的脚本将无法删除与任何选择器无关的属性...

如果我保留换行符，它就可以工作...

此外，我想从擅长 ReGex 的编码人员那里了解我的代码是否良好...

非常感谢您的帮助。

Answer 1

在最后一个替换中，您使用了多行标志。如果您只有一行，这是行不通的，这是在第一次替换之后进行的。因此，让我们先保留换行符，然后在删除选择器后删除它们。

您还可以稍微简化正则表达式。使用 x(?=a|b)而不是 x(?=a)|x(?=b) .您也不需要惰性匹配 [^\}]*? .

下面是一个工作示例。为了清楚起见，我只删除了 body选择器。

$$('button')[0].addEvent('click', function(){

    var css = document.id('css').get('text');

    var newCss = css
        // replace multiple tabs or spaces by one
        .replace(/( |\t)+/g, " ")
        // remove space at beginning of line
        .replace(/(^\s)/gm, "")
        // remove body in selector lists
        .replace(/(,\s*body\s*(?={|,)|body\s*,)/gi, "")
        // remove body before {
        .replace(/(body\s*(?={))/gi, "")
        // remove rules without selector
        .replace(/[\n\r]+\{[^\}]*\}/g, "")
        // remove linebreaks
        .replace(/[\n\r]+/g, "");

    document.id('cleancss').set('text', newCss);

});

您可以通过删除 { 前面的空格来进一步压缩样式表。或在 : 之后和 ,