原生js脚本格式化CSS代码的方法
墨初 Web前端 558阅读
为了加快前端web网页的加载速度，很多网站的站长都会将网站中的一些静态文件比如css样式代码进行压缩。但压缩后的代码不适合阅读与修改，为了方便阅读代码，需要将压缩后的代码进行格式化。下面的博文73so博客就和大家说一说利用js脚本来格式化css代码的方法。
js脚本格式化css样式代码
下面的js脚本代码可以将压缩化的CSS代码进行格式化，方便阅读与修改！
// https://www.73so.com
var css = 'CSS样式代码'; //输入要格式化的CSS代码
css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
css = css.replace(/;\s*;/g, ";");
css = css.replace(/\,[\s\.\#\d]*{/g, "{");
css = css.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
css = css.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
css = css.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
console.log(css); //输出格式化后的CSS代码js脚本格式化css代码的工具
复制下面的代码并保存为html文件，就可以在线格式化CSS代码的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS代码格式化工具-73so.com</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<textarea id="css" style="width:500px;height: 200px;"></textarea>
<button id="yasuo">格式化</button>
<script>
$('#yasuo').on('click',function(){
$('#css').val(format_css($('#css').val()));
});
function format_css(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>