简短的几句js实现css压缩和反压缩功能
2024-09-29 18:53:39
写在前面
最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实在无法忍受,我老大认为它实在是太浪费空间了。
那我应该怎么办呢,每次将本地代码上传之前都打开另外一个vs10,然后复制粘贴,可是下次从服务器拉下来代码我一编辑,手痒一下就又变成上面这个鬼样,折磨的我呀
刚刚看了豪情的一篇文章,http://www.cnblogs.com/jikey/archive/2010/04/19/1715474.html 才发现有这么简单的方法来实现css的格式化,瞬间觉得弱爆了
CSS压缩效果见下
body * { font-size:10pt; }/* ss sda */
p
{ clear:left; padding:5px 10px;
}
td
,
fieldset
{ padding : 10px ; }
textarea {
width:90%;
height:10em;
}
压缩代码 格式(多行) 格式(单行) 还原代码
大家可以点击上面的“压缩代码”、“格式多行”等按钮试一下效果
JS实现CSS压缩及格式化原理
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function cssCode(obj) {
this.init = function () {
var code = obj.value;
if (!this.code || this.code == "") this.code = code;//先保存起来 以方便后续还原
code = code.replace(/(\n|\t|\s)*/ig, '$1');
code = code.replace(/\n|\t|\s(\{|\}|\,|\:|\;)/ig, '$1');
code = code.replace(/(\{|\}|\,|\:|\;)\s/ig, '$1');
return code;
}
this.compress = function () {
var code = this.init();
return code;
}
this.format = function () {
var code = this.init();
code = code.replace(/(\{)/ig, ' $1');
code = code.replace(/(\{|\;)/ig, '$1\n\t');
code = code.replace(/\t*(\})/ig, '$1\n');
code = code.replace(/(\*\/)/ig, '$1\n');
return code;
}
this.formatOver = function () {
var code = this.init();
code = code.replace(/(\})/ig, '$1\n');
code = code.replace(/(\*\/)/ig, '$1\n');
return code;
}
this.recover = function () {
return (this.code) ? this.code : obj.value;
}
var my = this;
obj.onkeydown = function () {
my.code = "";
}
}
var code = new cssCode($('cssCode'));
</script>
大家看到没有,简简单单的几句话,也就是利用正则将换行、tab键、空格等去掉来实现压缩。
哎,发现自己太弱了,还是应该多跟园子里的大神学习下。(写这篇博文的意义还在于,原来让自己的博文上出现界面展示效果其实原理也很简单,只要把相关script和style插入到博文的html里面就可以了)
最新文章
- mysql删除二进制日志文件
- SQLServer事务
- SQL-表链接
- iOS NSString 和NSData 转换
- MFC线程钩子和全局钩子[HOOK DLL]
- git svn rebase出现了checksum mismatch的错误
- 记录linux tty的一次软锁排查
- yii学习笔记--快速创建一个项目
- 【论文速读】Chuhui Xue_ECCV2018_Accurate Scene Text Detection through Border Semantics Awareness and Bootstrapping
- 如何在页面上同时使用 jQuery 和其他框架?
- oracle 修改服务端字符集编码
- 【洛谷P1082】同余方程
- 微软BI 之SSAS 系列 - 多维数据集维度用法之一 引用维度 Referenced Dimension
- 泛型实体类List<;>;绑定到repeater
- 【Python】【Flask】前端调用后端方法
- redmine on centos
- [php]php总结(2)
- SharePoint自动化系列——通过PowerShell创建SharePoint Lists
- PhpStorm中实现代码自动换行
- [BZOJ4011][HNOI2015]落忆枫音-[dp乱搞+拓扑排序]