用原生JS进行CSS格式化和压缩
前言
一直比较喜欢收集网页特效，很多时候都会遇到CSS被压缩过的情况，这时查看起来就会非常不方便，有时为了减少文件大小，也会对自己的CSS进行压缩，网上提供这样服务的很多，但都不尽如人意，因此打算自己动手写一个JS来进行CSS的格式化和压缩
原理CSS的结构如下：
选择器 {
css属性声明：值;
}
所以对CSS格式化也就比较简单，大致分为以下几步;
1、把多个空格合并成一个，去掉换行
2、对处理后的字符串按"{"进行分组
3、遍历分组，对含有"}"的部分再次以"}"进行分组
4、对分组后的数据进行处理，主要是加上空格和换行
对CSS压缩就比较简单了，把空格合并，去掉换行就可以了
格式化下面分步对以上步骤进行实现。
初始化：
function formathtmljscss(source, spaceWidth, formatType) {
this .source = source;
this .spaceStr = " ";
if (!isNaN(spaceWidth)) {
if (spaceWidth > 1) {
this .spaceStr = "";
for ( var i = 0; i < spaceWidth; i++) {
this .spaceStr += " ";
}
}
else {
this .spaceStr = "\t";
}
}
this .formatType = formatType;
this .output = [];
}
这里几个参数分别是要格式化的CSS代码、CSS属性声明前空格宽度，类型(格式化/压缩)
1、把多个空格合并成一个，去掉换行：
formathtmljscss.prototype.removeSpace = function () {
this .source = this .source.replace(/\s+|\n/g, " ")
.replace(/\s*{\s*/g, "{")
.replace(/\s*}\s*/g, "}")
.replace(/\s*:\s*/g, ":")
.replace(/\s*;\s*/g, ";");
}
2、对处理后的字符串按"{"进行分组
formathtmljscss.prototype.split = function () {
var bigqleft = this .source.split("{");
}
3、遍历分组，对含有"}"的部分再次以"}"进行分组
formathtmljscss.prototype.split = function () {
var bigqleft = this .source.split("{");
var bigqright;
for ( var i = 0; i < bigqleft.length; i++) {
if (bigqleft[i].indexOf("}") != -1) {
bigqright = bigqleft[i].split("}");
}
else {
}
}
}
4、对分组后的数据进行处理，主要是加上空格和换行
这里的处理主要分为，把CSS属性声明和值部分取出来，然后加上空格和换行：
formathtmljscss.prototype.split = function () {
var bigqleft = this .source.split("{");
var bigqright;
for ( var i = 0; i < bigqleft.length; i++) {
if (bigqleft[i].indexOf("}") != -1) {
bigqright = bigqleft[i].split("}");
var pv = bigqright[0].split(";");
for ( var j = 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] + ";\n");
}
}
this .output.push("}\n");
bigqright[1] = this .trim( this .formatSelect(bigqright[1]));
if (bigqright[1].length > 0) {
this .output.push(bigqright[1], " {\n");
}
}
else {
this .output.push( this .trim( this .formatSelect(bigqleft[i])), " {\n");
}
}
}
这里调用了几个方法：trim、formatSelect、formatStatement，下面一一说明。
trim： 从命名就可以看出是去除首尾空格;
formathtmljscss.prototype.trim = function (str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
formatSelect： 是处理选择器部分语法，做法就是给"."前面加上空格，把","前后的空格去掉，把多个空格合并为一个:
formathtmljscss.prototype.formatSelect = function (str) {
return str.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, ":");
return str;
}
调用
调用部分比较简单，对于格式化来说就是去掉空格和换行，然后分组处理，对于压缩来说就是去掉空格和换行：
formathtmljscss.prototype.formatcss = function () {
if ( this .formatType == "compress") {
this .removeSpace();
}
else {
this .removeSpace();
this .split();
this .source = this .output.join("");
}
}
界面HTML代码：
View Code
跟页面元素按钮绑定事件:
View Code
演示
欢迎大家测试挑刺哈！
作者： Artwl 出处： http://artwl.cnblogs测试数据
本文首发博客园，版权归作者跟博客园共有。转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。
推荐工具： 在线测试正则表达式 、 JS/HTML在线格式化
JavaScript
用原生JS进行CSS格式化和压缩
posted @ 2012-03-25 19:16 artwl 阅读(1535) | 评论 (5) 编辑
《JavaScript高级程序设计》阅读笔记（十二）：内置对象Math
posted @ 2012-03-18 21:16 artwl 阅读(131) | 评论 (0) 编辑
JavaScript 中的内存泄露模式【转】
posted @ 2012-03-13 16:29 artwl 阅读(178) | 评论 (0) 编辑
从此不再惧怕URI编码：JavaScript及C# URI编码详解
posted @ 2012-03-07 00:24 artwl 阅读(4486) | 评论 (37) 编辑
《JavaScript高级程序设计》读书笔记之十一：内置对象Global
posted @ 2012-03-06 22:48 artwl 阅读(214) | 评论 (0) 编辑
《JavaScript高级程序设计》读书笔记之十：本地对象Date
posted @ 2012-02-27 21:33 artwl 阅读(158) | 评论 (0) 编辑
JavaScript计算字符串中每个字符出现的次数
posted @ 2012-02-26 22:53 artwl 阅读(126) | 评论 (3) 编辑
《JavaScript高级程序设计》读书笔记之九：本地对象Array
posted @ 2012-02-26 16:09 artwl 阅读(120) | 评论 (0) 编辑
jquery还原含有rowspan、colspan的table
posted @ 2012-02-08 22:55 artwl 阅读(178) | 评论 (0) 编辑
详解强大的jQuery选择器之过滤选择器、表单选择器
posted @ 2012-02-07 23:48 artwl 阅读(1589) | 评论 (7) 编辑
详解强大的jQuery选择器之基本选择器、层次选择器
posted @ 2012-02-06 22:51 artwl 阅读(1873) | 评论 (11) 编辑
jQuery插件原来如此简单——jQuery插件的机制及实战
posted @ 2012-02-05 21:39 artwl 阅读(2025) | 评论 (3) 编辑
《JavaScript高级程序设计》读书笔记之八：Function类及闭包
posted @ 2012-02-04 12:53 artwl 阅读(277) | 评论 (3) 编辑
《JavaScript高级程序设计》阅读笔记（七）：ECMAScript中的语句
posted @ 2012-01-02 15:34 artwl 阅读(150) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（六）：ECMAScript中的运算符（二）
posted @ 2012-01-02 13:23 artwl 阅读(150) | 评论 (0) 编辑
javascript日期格式化函数，跟C#中的使用方法类似
posted @ 2011-12-29 11:42 artwl 阅读(226) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（五）：ECMAScript中的运算符（一）
posted @ 2011-11-30 12:51 artwl 阅读(201) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（四）：ECMAScript中的类型转换
posted @ 2011-11-23 11:56 artwl 阅读(109) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（三）：ECMAScript中的引用类型
posted @ 2011-11-18 11:52 artwl 阅读(121) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（二）：ECMAScript中的原始类型
posted @ 2011-11-17 10:34 artwl 阅读(120) | 评论 (0) 编辑
《JavaScript高级程序设计》阅读笔记（一）：ECMAScript基础
posted @ 2011-11-02 11:47 artwl 阅读(292) | 评论 (4) 编辑
JS二维数组排序组合
posted @ 2011-10-20 13:12 artwl 阅读(106) | 评论 (0) 编辑
浅入浅出JS中的eval及json
posted @ 2011-09-07 12:10 artwl 阅读(319) | 评论 (1) 编辑
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于用原生JS进行CSS格式化和压缩的详细内容...