信鸽网

用于CSS代码压缩与格式化的javascript函数代码

  作者：bea

代码如下: var lCSSCoder={ format : function(s){//格式化代码 s=s.replace(/s*([{}:;,])s*/g,"$1"); s=s.replace(/,[s.#d]*{/g,"{"); s=s.replace(/([^s]){([^s])/g,"$1 { $2"); s=s.replace(/([^s])}([^]*)/g,"$1}$2"); s=s.replace(/([^s]);([^s}])/g,"$1

代码如下:


var lCSSCoder={
format : function(s){//格式化代码
s=s.replace(/s*([{}:;,])s*/g,"$1");
s=s.replace(/,[s.#d]*{/g,"{");
s=s.replace(/([^s]){([^s])/g,"$1 {
$2");
s=s.replace(/([^s])}([^
]*)/g,"$1
}
$2");
s=s.replace(/([^s]);([^s}])/g,"$1;
$2");
s=s.replace(/;s*;/g,";");//清除连续分号
return s;
},
pack :function(s){//压缩代码
s=s.replace(//*(.|
)*?*//g,"");//删除注释
s=s.replace(/s*([{}:;,])s*/g,"$1");
s=s.replace(/,[s.#d]*{/g,"{");//容错处理
s=s.replace(/;s*;/g,";");//清除连续分号
return s;
}
};


演示代码：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> lCSSCoder: CSS代码压缩与格式化</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CNLEI" />
<meta name="copyright" content="cnlei.y.l@gmail.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {text-align:center;}
textarea {border-width:1px;margin:0 5px;}
</style>
<script type="text/javascript">
var lCSSCoder={
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 {
$2");
s=s.replace(/([^s])}([^
]*)/g,"$1
}
$2");
s=s.replace(/([^s]);([^s}])/g,"$1;
$2");
return s;
},
pack :function(s){//压缩代码
s=s.replace(//*(.|
)*?*//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];
}
};
</script>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td>原始代码：
<textarea id="Code_1" rows="25" cols="50">/*PageHead*/
#PageHead {float:left;padding:3px 0;border-bottom:1px solid #b0bec7;margin-bottom:6px;}
#hCity li {float:left;padding:0 10px 0 0;}
#hCity li.fst {padding:0;}
#hRight {
float:right;padding:0 5px 0 20px;
background:url(img/ico_home.gif) no-repeat 0 50%;}
.SubPage #hRight { background-image:url(img/ico_favorite.gif);}

/*PageBody*/
#PageBody {float:left;padding:4px 0 0 0;}
.SCol {float:left;width:174px;}
.MCol {float:right;width:678px;overflow:hidden; }

#Logo {height:66px;margin:0;padding:0;}
/*MailLogin*/
#MailLogin {height:32px;}
#MailLogin li {float:left;}
#MailLogin li.txt {line-height:20px;}
#MailLogin li.inp {padding:0 2px;}
#MailLogin li.inp input {
margin:0;padding:0 4px;border:1px solid #7a9dbb;font:bold 12px/18px tahoma,Geneva,Arial,sans-serif;height:18px; }
#MailLogin li.inp input.notClicked {color:#ccc;font-weight:normal;}
#MailLogin li.sel {padding:1px 10px 0 0;}
#MailLogin li.btn {padding:1px 12px 0 5px;}
</textarea></td>
<td>转换后：
<textarea id="Code_2" rows="25" cols="50"></textarea></td>
</tr>
</table>
<p><input type="button" value="格式化代码" onclick="CSS('format');" /><input type="button" value="压缩代码" onclick="CSS('pack');"/></p>
<script type="text/javascript">
<!--
function CSS(s){
document.getElementById("Code_2").value=lCSSCoder[s](document.getElementById("Code_1").value);
}
//-->
</script>
</body>
</html>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]

下面是的css格式化工具，喜欢的朋友也可以看看里面的代码

CSS代码格式化 css在线压缩工具


有用  |  无用

猜你喜欢

您可能感兴趣的文章: