原生JS進行CSS格式化和壓縮
前言
一直比較喜歡收集網頁特效，很多時候都會遇到CSS被壓縮過的情況，這時查看起來就會非常不方便，有時為了減少文件大小，也會對自己的CSS進行壓縮，網上提供這樣服務的很多，但都不盡如人意，因此打算自己動手寫一個JS來進行CSS的格式化和壓縮
原理
CSS的結構如下：
選擇器{ css屬性聲明：值;}
所以對CSS格式化也就比較簡單，大致分為以下幾步;
1、把多個空格合并成一個，去掉換行
2、對處理后的字符串按"{"進行分組
3、遍歷分組，對含有"}"的部分再次以"}"進行分組
4、對分組后的數據進行處理，主要是加上空格和換行
對CSS壓縮就比較簡單了，把空格合并，去掉換行就可以了
格式化
下面分步對以上步驟進行實現。
初始化：
functionformathtmljscss(source, spaceWidth, formatType) {
this.source = source;
this.spaceStr = " ";
if(!isNaN(spaceWidth)) {
if(spaceWidth >1) {
this.spaceStr = "";
for(vari = 0; i <spaceWidth; i++) {
this.spaceStr += " ";
}
}
else{
this.spaceStr = " ";
}
}
this.formatType = formatType;
this.output = [];
}
這里幾個參數分別是要格式化的CSS代碼、CSS屬性聲明前空格寬度，類型(格式化/壓縮)
1、把多個空格合并成一個，去掉換行：
formathtmljscss.prototype.removeSpace = function() {
this.source = this.source.replace(/s+| /g, " ")
.replace(/s*{s*/g, "{")
.replace(/s*}s*/g, "}")
.replace(/s*:s*/g, ":")
.replace(/s*;s*/g, ";");
}
2、對處理后的字符串按"{"進行分組
formathtmljscss.prototype.split = function() {
varbigqleft = this.source.split("{");
}
3、遍歷分組，對含有"}"的部分再次以"}"進行分組
formathtmljscss.prototype.split = function() {
varbigqleft = this.source.split("{");
varbigqright;
for(vari = 0; i <bigqleft.length; i++) {
if(bigqleft[i].indexOf("}") != -1) {
bigqright = bigqleft[i].split("}");
}
else{
}
}
}
4、對分組后的數據進行處理，主要是加上空格和換行
這里的處理主要分為，把CSS屬性聲明和值部分取出來，然后加上空格和換行：
formathtmljscss.prototype.split = function() {
varbigqleft = this.source.split("{");
varbigqright;
for(vari = 0; i <bigqleft.length; i++) {
if(bigqleft[i].indexOf("}") != -1) {
bigqright = bigqleft[i].split("}");
varpv = bigqright[0].split(";");
for(varj = 0; j <pv.length; j++) {
pv[j] = this.formatStatement(this.trim(pv[j]),true);
if(pv[j].length >0) {
this.output.push(this.spaceStr + pv[j] + "; ");
}
}
this.output.push("} ");
bigqright[1] = this.trim(this.formatSelect(bigqright[1]));
if(bigqright[1].length >0) {
this.output.push(bigqright[1], " { ");
}
}
else{
this.output.push(this.trim(this.formatSelect(bigqleft[i])), " { ");
}
}
}
這里調用了幾個方法：trim、formatSelect、formatStatement，下面一一說明。
trim：從命名就可以看出是去除首尾空格;
formathtmljscss.prototype.trim = function(str) {
returnstr.replace(/(^s*)|(s*$)/g, "");
}
formatSelect：是處理選擇器部分語法，做法就是給"."前面加上空格，把","前后的空格去掉，把多個空格合并為一個:
formathtmljscss.prototype.formatSelect = function(str) {
returnstr.replace(/./g, " .")
.replace(/s+/g, " ")
.replace(/. /g, ".")
.replace(/s*,s*/g, ",");
}
formatStatement：是處理“css屬性聲明：值;”部分的語法，做法就是給":"后面加上空格，把多個空格合并為一個，去掉“#”后面的空格，去掉"px"前面的空格，去掉"-"兩邊的空格，去掉":"前面的空格:
formathtmljscss.prototype.formatStatement = function(str, autoCorrect) {
str = str.replace(/:/g, " : ")
.replace(/s+/g, " ")
.replace("# ", "#")
.replace(/s*px/ig, "px")
.replace(/s*-s*/g, "-")
.replace(/s*:/g, ":");
returnstr;
}
調用
調用部分比較簡單，對于格式化來說就是去掉空格和換行，然后分組處理，對于壓縮來說就是去掉空格和換行：
formathtmljscss.prototype.formatcss = function() {
if(this.formatType == "compress") {
this.removeSpace();
}
else{
this.removeSpace();
this.split();
this.source = this.output.join("");
}
}
界面HTML代碼：
View Code
<div id="content">
<div class="container">
<div class="box">
<div class="main">
<h2>CSS格式化/壓縮</h2>
<div id="blurb">
<fieldset id="options">
<button id="submit">
<span>格式化 / 壓縮 <img alt="格式化"src="/images/29.png"/></span>
</button><br/>
<span>縮進：</span>
<ul>
<li>
<select name="tabsize"id="tabsize">
<option value="1">tab鍵縮進</option>
<option value="2">2空格縮進</option>
<option selected="selected"value="4">4空格縮進</option>
</select>
</li>
</ul><br />
<span>類型：</span><br />
<input type="radio"name="format_type"value="format"checked="checked"id="format_format"/><label for="format_format">格式化</label>
<input type="radio"name="format_type"value="compress"id="format_compress"/><label for="format_compress">壓縮</label>
</fieldset>
</div>
<div id="beauty">
<fieldset id="textarea-wrap">
<textarea rows="20"cols="40"id="source"></textarea>
</fieldset>
</div>
</div>
</div>
</div>
</div>
跟頁面元素按鈕綁定事件:
View Code
window.onload = function() {
varsubmitBtn = document.getElementById("submit");
vartabsize = document.getElementById("tabsize");
varsourceCon = document.getElementById("source");
varsize = 4;
varformatType = "format";
submitBtn.onclick = function() {
varradios = document.getElementsByName("format_type");
for(i = 0; i <radios.length; i++) {
if(radios[i].checked) {
formatType = radios[i].value;
break;
}
}
varformat = newformathtmljscss(sourceCon.value, size, formatType);
format.formatcss();
sourceCon.value = format.source;
}
tabsize.onchange = function() {
size = this.options[this.options.selectedIndex].value;
submitBtn.click();
returnfalse;
}
}
演示
歡迎大家測試挑刺哈！
作者：Artwl 出處：http://artwl.cnblogs.com
本文首發(fā)博客園，版權歸作者跟博客園共有。轉載必須保留本段聲明，并在頁面顯著位置給出本文鏈接，否則保留追究法律責任的權利。
推薦工具：在線測試正則表達式、JS/HTML在線格式化
