当前位置:Web前端 > javascript> 正文

js实现CSS格式化和压缩

时间:2014-12-6类别:Web前端

js实现CSS格式化和压缩

js实现CSS格式化和压缩

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

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

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

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

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

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

三、js实现CSS格式化和压缩 实例

  • HTML 代码   复制
  • 
    <!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>
    <li id="wrap">
        <li id="head"></li>
        <li id="mainbody">
            <li class="center">
                <h1>CSS压缩混淆 / 格式化 / 美化工具</h1>
                <hr />
                <h2 class="sitetip">贴入要格式化或压缩的CSS代码:</h2>
                <textarea id="code" class="tarea">格式化或压缩的CSS代码</textarea>
                <li 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" />
                </li>
                <h2 class="sitetip">转换后的css代码: </h2>
                <textarea id="packer" class="tarea tarea-on"></textarea>
            </li>
        </li>
        <li id="foot"></li>
    </li>
    <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(            
    标签:
  • 上一篇下一篇

    猜您喜欢

    热门推荐