热搜： Python 编程 PHP vue dedecms

javascript压缩与格式化CSS代码的方法

发布时间：2022-12-31 17:47:41 来源：互联网

.

有些时候，我们需要一种危机，来激发我们自身的潜能，唤醒我们内心深处被掩藏已久的人生激情，来实现人生的最大价值。时刻是没有声音的锉刀。早上好！

网上有很多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代码的方法到此结束。未曾失败的人恐怕也未曾成功过。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章: