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代码的函数

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>


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注