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代码的函数
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; }下面的代码，复制到本地保存成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>
