原生JavaScript对CSS进行格式化和压缩

全是正则表达式

测试地址:http://jsfiddle.net/dtdxrk/AX5wN/embedded/result/

1 <!DOCTYPE>
2 <HTMLxmlns="http://www.w3.org/1999/xhtml">
3 <HEAD>
4 <metacharset="utf-8" />
5 <TITLE>原生JavaScript对CSS进行格式化和压缩</TITLE>
6 <styletype="text/css">
7 *{margin:0;padding: }
8 body{font-family:'微软雅黑';}
9 h1{font-weight:normal;font-size:30px;border-bottom:1px solid #ccc;margin-bottom:20px;background:green;color:#fff;padding:10px;}
10 input{padding:5px 20px;}
11 </style>
12 <BODY>
13 <h1>原生JavaScript对CSS进行格式化和压缩</h1>
14 <inputtype="submit"value="+格式化"id="format" />
15 <inputtype="submit"value="-压缩化"id="compress" />
16 <textareaname=""rows=""cols=""style="width:100%;height:500px;"id="code">
17 input,button{18 height:20px;background-color: #ffffff;/*border:1px solid #333333;*/19 }20 </textarea>
21
22 <script>
23 (function(){24   var$= function(id){returndocument.getElementById(id)};25
26 $("format").onclick= function(){27 $("code").value=cssFormat($("code").value);28 };29
30 $("compress").onclick= function(){31 $("code").value=cssCompress($("code").value);32 };33
34   functioncssFormat(code){35 code=code.replace(/\n/ig,'');36 code=code.replace(/(\s){2,}/ig,'$1');37 code=code.replace(/\t/ig,'');38 code=code.replace(/\n\}/ig,'\}');39 code=code.replace(/\n\{\s*/ig,'\{');40 code=code.replace(/(\S)\s*\}/ig,'$1\}');41 code=code.replace(/(\S)\s*\{/ig,'$1\{');42 code=code.replace(/\{\s*(\S)/ig,'\{$1');43     returncode;44 }45
46   functioncssCompress(code){47 code=code.replace(/(\s){2,}/ig,'$1');48     //code = code.replace(/(\S)\s*\{/ig,'$1\n{'); //{的换行
49 code=code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}');50 code=code.replace(/\/\*/ig,'\n\/\*');51 code=code.replace(/;\s*(\S)/ig,';\n\t$1');52 code=code.replace(/\}\s*(\S)/ig,'\}\n$1');53 code=code.replace(/\n\s*\}/ig,'\n\}');54 code=code.replace(/\{\s*(\S)/ig,'\{\n\t$1');55 code=code.replace(/(\S)\s*\*\//ig,'$1\*\/');56 code=code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1');57 code=code.replace(/(\S)\}/ig,'$1\n\}');58 code=code.replace(/(\n){2,}/ig,'\n');59     returncode;60 }61
62 }());63
64 </script>
65
66 </BODY>
67 </HTML>

转载于:https://www.cnblogs.com/dtdxrk/archive/2013/01/16/2862835.html

原生JavaScript对CSS进行格式化和压缩相关推荐

原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
《原生javascript制作各种酷炫组件》专栏介绍
本专栏主要是用原生javascript和css来编写一些炫酷的效果,用原生写是为了读者能把代码放到任何框架当中,代码没有做封装,瀑布式的代码理解起来容易,也容易修改以便达到自己想要的效果,适合初级学者 ...
实现CSS在线美化(格式化)、压缩、加密、解密、混淆工具-toolfk程序员工具网
本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果.Tool ...
打开html文件图片为什么没有_提高网站打开速度秘诀:压缩html,Javascript和CSS文件...
微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号 ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
前端CSS代码格式化、JavaScript代码格式化函数
CSS代码格式化 format = (s) =>s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1").replace(/;\s*;/g, &quo ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
推荐15个 JavaScript 和 CSS 库
Tutorialzine的使命是让开发者与最新的Web开发发展同步.因此,我们每月都会精选一批最优秀的资源推荐给大家,相信这些资源你绝对值得拥有! ClarifyJS ClarifyJS可以让你串联一 ...

原生JavaScript对CSS进行格式化和压缩

原生JavaScript对CSS进行格式化和压缩相关推荐

最新文章

热门文章