JSFiddle - React, Tailwind, and code Playground

HTML

<h1>原生JavaScript对CSS进行格式化和压缩</h1>
<input type="submit" value="+格式化" id="format" />
<input type="submit" value="-压缩化" id="compress" />
<textarea name="" rows="" cols="" style="width:100%;height:500px;" id="code">
input,button{ 
height:20px;background-color: #ffffff;/*border:1px solid #333333;*/ 
} 
</textarea>

CSS

*{margin: 0;padding: }
body{font-family: '微软雅黑';}
h1{font-weight: normal;font-size: 30px;border-bottom: 1px solid #ccc;margin-bottom: 20px;background: green;color: #fff;padding: 10px;}
input{padding: 5px 20px;}

JavaScript

(function(){
  var $ = function(id){return document.getElementById(id)};

  $("format").onclick = function(){
    $("code").value = cssFormat($("code").value);
  };

  $("compress").onclick = function(){
    $("code").value = cssCompress($("code").value);
  };

  function cssFormat(code){ 
    code = code.replace(/\n/ig,''); 
    code = code.replace(/(\s){2,}/ig,'$1'); 
    code = code.replace(/\t/ig,''); 
    code = code.replace(/\n\}/ig,'\}'); 
    code = code.replace(/\n\{\s*/ig,'\{'); 
    code = code.replace(/(\S)\s*\}/ig,'$1\}'); 
    code = code.replace(/(\S)\s*\{/ig,'$1\{'); 
    code = code.replace(/\{\s*(\S)/ig,'\{$1'); 
    return code; 
  }

  function cssCompress(code){ 
    code = code.replace(/(\s){2,}/ig,'$1'); 
    // code = code.replace(/(\S)\s*\{/ig,'$1\n{'); //{的换行
    code = code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}'); 
    code = code.replace(/\/\*/ig,'\n\/\*'); 
    code = code.replace(/;\s*(\S)/ig,';\n\t$1'); 
    code = code.replace(/\}\s*(\S)/ig,'\}\n$1'); 
    code = code.replace(/\n\s*\}/ig,'\n\}'); 
    code = code.replace(/\{\s*(\S)/ig,'\{\n\t$1'); 
    code = code.replace(/(\S)\s*\*\//ig,'$1\*\/'); 
    code = code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1'); 
    code = code.replace(/(\S)\}/ig,'$1\n\}'); 
    code = code.replace(/(\n){2,}/ig,'\n'); 
    return code; 
  } 

}());