原创css压缩、格式化和净化工具184
一款原创前端小工具,该css美化工具包含css美化,css净化,css压缩,另外还包含详细的注释,
美化是将代码格式化使代码容易阅读,净化是将代码单选化,并去除注释,
压缩是将代码最小化,去除多余空格和分号加快css的加载速度

压缩代码
	var val = oCode.value;
	val = val.replace(/\/\*(.|\n)*?\*\//g,'');				//去除注释
	val = val.replace(/^\s+|\s+$/g,'');						//清除首尾空格
	val = val.replace(/(:)\s+/g,'$1');  			   		//去除 冒号后多个空格              如 width:  100px  => width:100px
	val = val.replace(/\s{2,}/g,' ');   			   		//去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px
	val = val.replace(/,\s+|\s+,/g,',');			    	//去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3  
	val = val.replace(/;{2,}|;\s+/g,';');   				//去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px 
	val = val.replace(/\s*\{\s*/g,'{');						//去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}
	val = val.replace(/\s*}\s*/g,'}');						//去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}
	val = val.replace(/[\n\t\f\r]/g,'');					//去除换行,制表符,分页符,回车  
	val = val.replace(/;}/g,'}');      					    //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}
	oCode.value = val;
格式化代码
var val = oCode.value;
	val = val.replace(/(\*\/)\s+(\w)/g,'$1\n$2'); //格式化注释后的多余空格					
	val = val.replace(/(:)\s+/g,'$1');  	//格式化冒号间多余空格		   		
	val = val.replace(/,\s+|\s+,/g,',');	//格式化逗号间多余空格		    	
	val = val.replace(/;{2,}|;\s+/g,';');   //格式化分号后多余字符 				
	val = val.replace(/;}/g,'}'); 			//去除最后一个分号
	val = val.replace(/\s*\{\s*/g,' {\n\t');//格式化左{	
	val = val.replace(/\s*}\s*/g,'\n}\n');  //格式化左}
	val = val.replace(/\s*;\s*/g, ';\n\t'); //格式化属性
	oCode.value = val;	

技术讨论区(0 个讨论)

  1. 请先登录

      发 布