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

【问题标题】：Remove CSS selectors and it's related properties if needed如果需要，删除 CSS 选择器及其相关属性
【发布时间】：2011-05-31 18:12:08
【问题描述】：

我正在尝试删除特定的 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);

});

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

如果我保留换行符，它会起作用...

另外，如果我的代码很好，我想从擅长正则表达式的编码人员那里知道...

非常感谢您的任何帮助。

【问题讨论】：

我添加了标签mootools，因为您似乎正在使用它。
您能举一个输入示例和每个示例所需的输出吗？
带换行符：link 不带换行符：link
这是你的插件吗？ mootools.net/forge/p/minimizecode ?我认为自从你在 forge 上发布以来，你已经解决了你的问题 - 只是在我的 baseBox 插件之后才注意到它:)
其实我还没有解决问题...

标签： javascript css regex mootools css-selectors

【解决方案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);

});

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

【讨论】：