如何压缩和格式化js CSS代码

顺晟科技

2021-06-28 17:25:56

194

网上有很多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>

网站建设

Js

如何压缩和格式化js CSS代码