Supprimer sélecteurs CSS et ses propriétés de relation si nécessaire

Question

Je suis en train de supprimer des sélecteurs CSS spécifiques, et s'il n'y a plus sélecteurs pour une liste de propriétés que le script supprime ...

j'ai pu obtenir une partie du travail de script: http://jsfiddle.net/jnbdz/MarRr/5/

Voici le code:

$$('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); 

}); 

le problème est que si je retire la ligne casse le script que j'ai écrit ne sera pas en mesure d'éliminer les propriétés qui ne sont pas liés à tous les sélecteurs ...

Si je garde la ligne se casse cela fonctionne ...

Aussi, je voudrais savoir de codeurs qui sont bons avec regex si mon code est bon ...

Merci beaucoup à l'avance pour toute aide.

Answer 1

Dans le dernier remplacement, vous utilisez le drapeau multiligne. Cela ne peut pas fonctionner, si vous avez seulement une ligne, ce que vous faites après le premier remplacement. Gardons donc les sauts de ligne en premier et retirez-les après le retrait des sélecteurs.

Vous pouvez également simplifier un peu les expressions rationnelles. Utilisez x(?=a|b) au lieu de x(?=a)|x(?=b). Vous n'avez pas non plus besoin de la correspondance paresseuse [^\}]*?.

Ci-dessous un exemple de travail. Pour plus de clarté, j'ai seulement retiré le sélecteur 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); 

}); 

Vous pouvez compresser encore la feuille de style en supprimant les espaces devant { ou après : et ,