您的位置：首页 > Web前端 > javascript > 正文

js实现CSS格式化和压缩

更多 时间：2014-12-6 类别：Web前端 浏览量：1222

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(
    
 
    
  
    标签：CSS压缩   
    
 
    
 
    

    

    
              
  • 上一篇：C#中Obsolete
    •                 	  
			  
  • 下一篇：VS中Code Snippet 代码段
    • 

  
     


    
  
    
      您可能感兴趣

    • 排行榜

    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利