hi,欢迎访问本站!
当前位置: 首页Web前端正文

原生JS压缩或格式化CSS代码的方法

墨初 Web前端 625阅读

想要压缩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>
标签:
声明:无特别说明,转载请标明本文来源!
相关推荐