有些时候，我们需要一种危机，来激发我们自身的潜能，唤醒我们内心深处被掩藏已久的人生激情，来实现人生的最大价值。时刻是没有声音的锉刀。早上好！
网上有很多CSS压缩与格式化的工具，就想着模仿人家的功能自己写个专门用来压缩CSS代码的小工具。尝试了一下用JS脚本来写，没想到压缩后的效果还是可以的。
js压缩CSS代码的方法
JS自定义压缩CSS代码的函数
function yasuoCss (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];
}js格式化CSS代码的方法
js自定义格式化CSS代码的函数
function formatCss(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;
}JS压缩与格式化CSS代码完整的示例
下面的代码，复制到本地保存成html文件即可使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>-压缩与格式化CSS代码</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<p>未压缩的CSS代码：</p>
<textarea id="css" style="width: 500px;height: 200px;"></textarea>
<p>压缩后的CSS：</p>
<textarea id="css_bak" style="width: 500px;height: 200px;"></textarea>
<br/>
<br/>
<button class="zip">压缩CSS代码</button>
<button class="nozip">格式化CSS代码</button>
<script>
$('body').on('click','.zip',function(){
var css = $('#css').val();
if(css.length < 10){
alert('请输入未压缩的CSS代码！');
return false;
}
$('#css_bak').val(yasuoCss(css));
});
$('body').on('click','.nozip',function(){
var css = $('#css_bak').val();
if(css.length < 10){
alert('请输入压缩后的CSS代码！');
return false;
}
$('#css').val(formatCss(css));
});
function yasuoCss (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];
}
function formatCss(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;
}
</script>
</body>
</html> 本文javascript压缩与格式化CSS代码的方法到此结束。未曾失败的人恐怕也未曾成功过。小编再次感谢大家对我们的支持！
![]("text.jpg)