一、CSS格式化大致分爲以下幾步
1、把多個空格合併成一個，去掉換行
2、對處理後的字符串按"{"進行分組
3、遍歷分組，對含有"}"的部分再次以"}"進行分組
4、對分組後的數據進行處理，主要是加上空格和換行
二、對CSS壓縮比較常見的處理方法是把空格合併，去掉換行就可以了
三、實例
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>CSS壓縮混淆 / 格式化 / 美化工具</title>
<style type="text/csss">
@charset "utf-8";
/**//* CSS Document */
*{}{margin:0; padding:0; font-family:"Microsoft YaHei UI"; font-size:14px; color:#444;}
img{}{border:none;}
li {}{list-style:none;}
a{}{text-decoration:none}
#wrap{}{ width:960px; margin:0 auto;}
#head, #mainbody, #foot{}{ width:100%;}
/**//*表單控件樣式 start*/
.tarea {}{ margin-left:20px; width:90%; height:220px; border:1px solid #e6e6e6; margin-bottom:12px; box-shadow:inset 1px 1px 1px #eee; padding:4px; border-radius:2px; line-height:18px; color:#CCC; font-size:12px;}
.tarea-on{}{color:#000;}
textarea{}{ overflow:auto; vertical-align:top;}
.sbtn{}{ cursor:pointer; display: inline-block; vertical-align:middle;height:27px; line-height:27px; padding:0 12px; border-radius:2px; border:1px solid #ddd; text-align:center;}
/**//*表單控件樣式 end*/
.subbtn {}{ margin-left:50px; margin-bottom:10px;}
.center h2{}{ margin-left:30px;}
.sitetip{}{ margin-bottom:12px;}
</style>
</head>
<body>
<div id="wrap">
<div id="head"></div>
<div id="mainbody">
<div class="center">
<h1>CSS壓縮混淆 / 格式化 / 美化工具</h1>
<hr />
<h2 class="sitetip">貼入要格式化或壓縮的CSS代碼：</h2>
<textarea id="code" class="tarea">格式化或壓縮的CSS代碼</textarea>
<div class="subbtn">
<input type="button" onClick="CSS('packAdv')" value="高級壓縮" class="sbtn" />
<input type="button" onClick="CSS('pack')" value="普通壓縮" class="sbtn" />
<input type="button" onClick="CSS('format')" value="格式化" class="sbtn" />
</div>
<h2 class="sitetip">轉換後的css代碼： </h2>
<textarea id="packer" class="tarea tarea-on"></textarea>
</div>
</div>
<div id="foot"></div>
</div>
<script type="text/javascript">
/**//**
* css 壓縮 格式化
*/
var CSSCoder = {
format: function (s) {//格式化
s = s.replace(/\\s*([\\{\\}\\:\\;\\,])\\s*/g, "$1");
s = s.replace(/;\\s*;/g, ";");
s = s.replace(/\\,[\\s\\.\\#\\d]*{/g, "{");
s = s.replace(/([^\\s])\\{([^\\s])/g, "$1 {\\n\\t$2");
s = s.replace(/([^\\s])\\}([^\\n]*)/g, "$1\\n}\\n$2");
s = s.replace(/([^\\s]);([^\\s\\}])/g, "$1;\\n\\t$2");
return s;
},
packAdv: function (s) {//高級壓縮
s = s.replace(/\\/\\*(.|\\n)*?\\*\\//g, "");
s = s.replace(/\\s*([\\{\\}\\:\\;\\,])\\s*/g, "$1");
s = s.replace(/\\,[\\s\\.\\#\\d]*\\{/g, "{");
s = s.replace(/;\\s*;/g, ";");
s = s.match(/^\\s*(\\S+(\\s+\\S+)*)\\s*$/);
return (s == null) ? "" : s[1];
},
pack: function (s) {//普通壓縮
s = s.replace(/\\/\\*(.|\\n)*?\\*\\//g, "");
s = s.replace(/\\s*([\\{\\}\\:\\;\\,])\\s*/g, "$1");
s = s.replace(/\\,[\\s\\.\\#\\d]*\\{/g, "{");
s = s.replace(/;\\s*;/g, ";");
s = s.replace(/;\\s*}/g, "}");
s = s.replace(/([^\\s])\\{([^\\s])/g, "$1{$2");
s = s.replace(/([^\\s])\\}([^\\n]s*)/g, "$1}\\n$2");
return s;
}
};
function CSS(s) {
document.getElementById("packer").value = CSSCoder[s](document.getElementById("code").value);
}
</script>
</body>
</html>
文章轉載自： js實現CSS格式化和壓縮 http://www.studyofnet.com/news/707.html