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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用于CSS代码压缩与格式化的javascript函数代码

Javascript: 经常用到的JavasScript事件的翻译; Javascript下的keyCode键码值表; 用javascript动态调整iframe高度的代码; javascript应用：Iframe自适应其加载的内容高度; javascript 控制弹出窗口; 用javascript父窗口控制只弹出一个子窗口; 给moz-firefox下添加IE方法和属性; FireFox中textNode分片的问题; 对google个性主页的拖拽效果的js的完整注释[转]; 身份证号码前六位所代表的省,市,区, 以及地区编码下载; 一个友好的.改善的 Object.prototype.toString的实现; 如何写一个通用的JavaScript效果库！(1/2); 如何写一个通用的JavaScript效果库！(2/2); 几个高效，简洁的字符处理函数; 无语，javascript居然支持中文(unicode)编程！; ie 处理 gif动画的onload 事件的一个 bug; 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别; firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码; 深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法; JavaScript 中的replace方法说明

No. « ‹ 61 62 63 64 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 300 ::

收藏到网摘: n/a

javascript 数组使用方法汇总 ExtJS下grid的一些属性说明

呵呵，发现只要几行ＪＳ代码就可实现css的压缩与格式化，非常不错。

复制代码代码如下:

 
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 {\n\t$2"); 
s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n}\n$2"); 
s=s.replace(/([^\s]);([^\s\}])/g,"$1;\n\t$2"); 
s=s.replace(/;\s*;/g,";");//清除连续分号 
return s; 
}, 
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,";");//清除连续分号 
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 {\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; }, 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.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>
<input type="button" value="格式化代码" onclick="CSS('format');" /><input type="button" value="压缩代码" onclick="CSS('pack');"/>
<script type="text/javascript">
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

下面是软晨学习网的css格式化工具，喜欢的朋友也可以看看里面的代码
CSS代码格式化 css在线压缩工具

javascript 数组使用方法汇总 ExtJS下grid的一些属性说明

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

评论 (0) All

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