js如何将CSS格式化和压缩

来源：互联网发布：淘宝有哪些好看的鞋店编辑：程序博客网时间：2024/04/27 16:05

一、CSS格式化大致分为以下几步

1、把多个空格合并成一个，去掉换行

2、对处理后的字符串按"{"进行分组

3、遍历分组，对含有"}"的部分再次以"}"进行分组

4、对分组后的数据进行处理，主要是加上空格和换行

二、对CSS压缩比较常见的处理方法是把空格合并，去掉换行就可以了

三、实例

<!doctype html><html><head><meta charset="utf-8"><title>CSS压缩混淆 / 格式化 / 美化工具</title><style type="text/csss">@charset "utf-8";/**//* CSS Document */*{}{margin:0; padding:0; font-family:"Microsoft YaHei UI"; font-size:14px; color:#444;}img{}{border:none;}li {}{list-style:none;}a{}{text-decoration:none}#wrap{}{ width:960px; margin:0 auto;}#head, #mainbody, #foot{}{ width:100%;}/**//*表单控件样式 start*/.tarea {}{ margin-left:20px; width:90%; height:220px; border:1px solid #e6e6e6; margin-bottom:12px; box-shadow:inset 1px 1px 1px #eee; padding:4px; border-radius:2px; line-height:18px; color:#CCC; font-size:12px;}.tarea-on{}{color:#000;}textarea{}{ overflow:auto; vertical-align:top;}.sbtn{}{ cursor:pointer; display: inline-block; vertical-align:middle;height:27px; line-height:27px; padding:0 12px; border-radius:2px; border:1px solid #ddd; text-align:center;}/**//*表单控件样式 end*/.subbtn {}{ margin-left:50px; margin-bottom:10px;}.center h2{}{ margin-left:30px;}.sitetip{}{ margin-bottom:12px;}</style></head><body><div id="wrap">    <div id="head"></div>    <div id="mainbody">        <div class="center">            <h1>CSS压缩混淆 / 格式化 / 美化工具</h1>            <hr />            <h2 class="sitetip">贴入要格式化或压缩的CSS代码：</h2>            <textarea id="code" class="tarea">格式化或压缩的CSS代码</textarea>            <div class="subbtn">                <input type="button" onClick="CSS('packAdv')" value="高级压缩" class="sbtn" />                <input type="button" onClick="CSS('pack')" value="普通压缩" class="sbtn" />                <input type="button" onClick="CSS('format')" value="格式化" class="sbtn" />            </div>            <h2 class="sitetip">转换后的css代码： </h2>            <textarea id="packer" class="tarea tarea-on"></textarea>        </div>    </div>    <div id="foot"></div></div><script type="text/javascript">/**//*** css 压缩 格式化*/var CSSCoder = {    format: function (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;    },    packAdv: function (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];    },    pack: function (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.replace(/;\\s*}/g, "}");        s = s.replace(/([^\\s])\\{([^\\s])/g, "$1{$2");        s = s.replace(/([^\\s])\\}([^\\n]s*)/g, "$1}\\n$2");        return s;    }};function CSS(s) {    document.getElementById("packer").value = CSSCoder[s](document.getElementById("code").value);}</script></body></html>

文章转载自： js实现CSS格式化和压缩 http://www.studyofnet.com/news/707.html

0 0