正文

js压缩css代码

小君
小君 V管理员/0 评论/991 阅读
0501

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>


若无特殊标注皆为互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！