用原生JS进行CSS格式化和压缩

开发 前端
一直比较喜欢收集网页特效,很多时候都会遇到CSS被压缩过的情况,这时查看起来就会非常不方便,有时为了减少文件大小,也会对自己的CSS进行压缩,网上提供这样服务的很多,但都不尽如人意,因此打算自己动手写一个JS来进行CSS的格式化和压缩。

前  言

一直比较喜欢收集网页特效,很多时候都会遇到CSS被压缩过的情况,这时查看起来就会非常不方便,有时为了减少文件大小,也会对自己的CSS进行压缩,网上提供这样服务的很多,但都不尽如人意,因此打算自己动手写一个JS来进行CSS的格式化和压缩。

原  理

CSS的结构如下:

  1. 选择器{  
  2.   css属性声明:值;  

所以对CSS格式化也就比较简单,大致分为以下几步;

1、把多个空格合并成一个,去掉换行

2、对处理后的字符串按"{"进行分组

3、遍历分组,对含有"}"的部分再次以"}"进行分组

4、对分组后的数据进行处理,主要是加上空格和换行

对CSS压缩就比较简单了,把空格合并,去掉换行就可以了

 

格式化

下面分步对以上步骤进行实现。

初始化:

  1. function formathtmljscss(source, spaceWidth, formatType) {  
  2.     this.source = source;  
  3.     this.spaceStr = "    ";  
  4.     if (!isNaN(spaceWidth)) {  
  5.         if (spaceWidth > 1) {  
  6.             this.spaceStr = "";  
  7.             for (var i = 0; i < spaceWidth; i++) {  
  8.                 this.spaceStr += " ";  
  9.             }  
  10.         }  
  11.         else {  
  12.             this.spaceStr = "\t";  
  13.         }  
  14.     }  
  15.     this.formatType = formatType;  
  16.     this.output = [];  

这里几个参数分别是要格式化的CSS代码、CSS属性声明前空格宽度,类型(格式化/压缩)

1、把多个空格合并成一个,去掉换行:

  1. formathtmljscss.prototype.removeSpace = function () {  
  2.     this.source = this.source.replace(/\s+|\n/g, " ")  
  3.         .replace(/\s*{\s*/g, "{")  
  4.         .replace(/\s*}\s*/g, "}")  
  5.         .replace(/\s*:\s*/g, ":")  
  6.         .replace(/\s*;\s*/g, ";");  

2、对处理后的字符串按"{"进行分组

  1. formathtmljscss.prototype.split = function () {  
  2.     var bigqleft = this.source.split("{");  

3、遍历分组,对含有"}"的部分再次以"}"进行分组

  1. formathtmljscss.prototype.split = function () {  
  2.     var bigqleft = this.source.split("{");  
  3.     var bigqright;  
  4.     for (var i = 0; i < bigqleft.length; i++) {  
  5.         if (bigqleft[i].indexOf("}") != -1) {  
  6.             bigqright = bigqleft[i].split("}");  
  7.         }  
  8.         else {  
  9.              
  10.         }  
  11.     }  

4、对分组后的数据进行处理,主要是加上空格和换行

这里的处理主要分为,把CSS属性声明和值部分取出来,然后加上空格和换行:

  1. formathtmljscss.prototype.split = function () {  
  2.     var bigqleft = this.source.split("{");  
  3.     var bigqright;  
  4.     for (var i = 0; i < bigqleft.length; i++) {  
  5.         if (bigqleft[i].indexOf("}") != -1) {  
  6.             bigqright = bigqleft[i].split("}");  
  7.             var pv = bigqright[0].split(";");  
  8.             for (var j = 0; j < pv.length; j++) {  
  9.                 pv[j] = this.formatStatement(this.trim(pv[j]),true);  
  10.                 if (pv[j].length > 0) {  
  11.                     this.output.push(this.spaceStr + pv[j] + ";\n");  
  12.                 }  
  13.             }  
  14.             this.output.push("}\n");  
  15.             bigqright[1] = this.trim(this.formatSelect(bigqright[1]));  
  16.             if (bigqright[1].length > 0) {  
  17.                 this.output.push(bigqright[1], " {\n");  
  18.             }  
  19.         }  
  20.         else {  
  21.             this.output.push(this.trim(this.formatSelect(bigqleft[i])), " {\n");  
  22.         }  
  23.     }  

这里调用了几个方法:trim、formatSelect、formatStatement,下面一一说明。

trim:从命名就可以看出是去除首尾空格;

  1. formathtmljscss.prototype.trim = function (str) {  
  2.     return str.replace(/(^\s*)|(\s*$)/g, "");  

formatSelect:是处理选择器部分语法,做法就是给"."前面加上空格,把","前后的空格去掉,把多个空格合并为一个:

  1. formathtmljscss.prototype.formatSelect = function (str) {  
  2.     return str.replace(/\./g, " .")  
  3.         .replace(/\s+/g, " ")  
  4.         .replace(/\. /g, ".")  
  5.         .replace(/\s*,\s*/g, ",");  

formatStatement:是处理“css属性声明:值;”部分的语法,做法就是给":"后面加上空格,把多个空格合并为一个,去掉“#”后面的空格,去掉"px"前面的空格,去掉"-"两边的空格,去掉":"前面的空格:

  1. formathtmljscss.prototype.formatStatement = function (str, autoCorrect) {  
  2.     str = str.replace(/:/g, " : ")  
  3.         .replace(/\s+/g, " ")  
  4.         .replace("# ""#")  
  5.         .replace(/\s*px/ig, "px")  
  6.         .replace(/\s*-\s*/g, "-")  
  7.         .replace(/\s*:/g, ":");  
  8.  
  9.     return str;  

调  用

调用部分比较简单,对于格式化来说就是去掉空格和换行,然后分组处理,对于压缩来说就是去掉空格和换行:

  1. formathtmljscss.prototype.formatcss = function () {  
  2.     if (this.formatType == "compress") {  
  3.         this.removeSpace();  
  4.     }  
  5.     else {  
  6.         this.removeSpace();  
  7.         this.split();  
  8.         this.source = this.output.join("");  
  9.     }  

界面HTML代码:

  1. <div id="content"> 
  2.         <div class="container"> 
  3.             <div class="box"> 
  4.                 <div class="main"> 
  5.                     <h2>CSS格式化/压缩</h2> 
  6.                     <div id="blurb"> 
  7.                         <fieldset id="options"> 
  8.                             <button id="submit"> 
  9.                                 <span>格式化 / 压缩&nbsp;&nbsp;<img alt="格式化" src="/images/29.png"/></span> 
  10.                             </button><br/> 
  11.                             <span>缩进:</span> 
  12.                             <ul> 
  13.                                 <li> 
  14.                                     <select name="tabsize" id="tabsize"> 
  15.                                         <option value="1">tab键缩进</option> 
  16.                                         <option value="2">2空格缩进</option> 
  17.                                         <option selected="selected" value="4">4空格缩进</option> 
  18.                                     </select> 
  19.                                 </li> 
  20.                             </ul><br /> 
  21.                             <span>类型:</span><br /> 
  22.                             <input type="radio" name="format_type" value="format" checked="checked" id="format_format" /><label for="format_format">格式化</label> 
  23.                             <input type="radio" name="format_type" value="compress" id="format_compress" /><label for="format_compress">压缩</label> 
  24.                         </fieldset> 
  25.                     </div> 
  26.                     <div id="beauty"> 
  27.                         <fieldset id="textarea-wrap"> 
  28.                             <textarea rows="20" cols="40" id="source"></textarea> 
  29.                         </fieldset> 
  30.                     </div> 
  31.                 </div> 
  32.             </div> 
  33.         </div> 
  34.     </div> 

跟页面元素按钮绑定事件:

  1. window.onload = function () {  
  2.     var submitBtn = document.getElementById("submit");  
  3.     var tabsize = document.getElementById("tabsize");  
  4.     var sourceCon = document.getElementById("source");  
  5.     var size = 4;  
  6.     var formatType = "format";  
  7.     submitBtn.onclick = function () {  
  8.         var radios = document.getElementsByName("format_type");  
  9.         for (i = 0; i < radios.length; i++) {  
  10.             if (radios[i].checked) {  
  11.                 formatType = radios[i].value;  
  12.                 break;  
  13.             }  
  14.         }  
  15.         var format = new formathtmljscss(sourceCon.value, size, formatType);  
  16.         format.formatcss();  
  17.         sourceCon.value = format.source;  
  18.     }  
  19.     tabsize.onchange = function () {  
  20.         size = this.options[this.options.selectedIndex].value;  
  21.         submitBtn.click();  
  22.         return false;  
  23.     }  

演示(请进原文)

原文链接:http://www.cnblogs.com/artwl/archive/2012/03/25/2416909.html

【编辑推荐】

  1. 10件有关JavaScript让人费解的事情
  2. 面向对象的JavaScript基本知识指南大全
  3. 是时候开始使用JavaScript严格模式了
  4. 好用的高质量JavaScript库一览
  5. 一位反JavaScript主义者的觉醒
责任编辑:林师授 来源: Artwl的博客
相关推荐

2012-03-26 10:45:34

CSS

2018-12-03 09:10:07

Linux驱动器命令

2020-11-03 10:21:33

MySQL

2009-08-03 14:25:59

C#日期格式化

2024-01-08 22:03:22

python代码开发

2022-05-09 08:17:37

InstantJava字符

2010-08-03 15:36:38

FlexBuilder

2013-02-01 10:14:14

Visual Stud

2013-07-08 17:41:53

Linux 系统U盘格式化

2023-06-13 07:50:49

Gopher格式化时间

2010-07-29 11:12:30

Flex日期格式化

2009-08-03 16:24:05

C#格式化

2010-07-16 16:00:08

Perl格式化输出

2015-01-07 15:21:30

Android Stu代码格式化

2018-11-02 10:45:35

windowsU盘格式化

2010-07-29 11:03:53

Flex代码格式化

2010-10-28 15:32:42

oracle日期格式化

2010-07-16 15:23:34

Perl格式化输出

2019-05-17 13:20:57

Black格式化工具Python

2010-07-16 15:44:57

Perl格式化输出
点赞
收藏

51CTO技术栈公众号