原生JS压缩或格式化CSS代码的方法
墨初 Web前端 1710阅读
想要压缩CSS代码的体积剔除代码中的空格或换行以及美化或格式化CSS样式代码，可以使用JS脚本完成，下面是一个利用js压缩以及格式化CSS样式的工具，大家参考一下。
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>73so-压缩与格式化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>