一些网站的CSS文件喜欢进行压缩处理以便加快网站的加载速度,由于代码经过了压缩处理缩成一团,肉眼看起来非常的杂乱,就研究了一下利用js脚本来格式化CSS样式代码的方法并制作了一个小工具!

js格式化css样式代码的方法

js代码

<script>
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代码
</script>

js简单格式化CSS样式代码的小工具

下面是一个简单的格式化CSS代码的web页面小工具,将代码复制到本地保存成html网页运行即可!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</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>