写在前面

最近一直在整理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里面就可以了

简短的几句js实现css压缩和反压缩功能的更多相关文章

  1. 将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩

    在网站发布中,一般要将js,css文件压缩减少体积,以减少在HTTP请求中的流量.将Microsoft Ajax Minifier集成到VS2013中就可以对JS.CSS进行编译时压缩. VS2013 ...

  2. 【web性能】 JS、CSS的合并、压缩、缓存管理

    本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载.   存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发 ...

  3. gulp 实现 js、css,img 合并和压缩

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  4. gulp 实现 js、css,img 合并和压缩(转)

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  5. 使用yuicompressor-maven-plugin压缩js及css文件

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  6. 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

  7. (转)使用yuicompressor-maven-plugin压缩js及css文件(二)

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  8. 在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)

    转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...

  9. java Web程序使用wro4j合并、压缩js、css等静态资源

    在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...

随机推荐

  1. apply,call,bind的区别

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  2. 在Function对象上扩展method方法

    ;(function() { /** * 在Function对象上扩展method方法 * @param {String} name 扩展的方法名称 * @param {Function} callb ...

  3. 如何替换orcl实例下的四个数据库

    1,drop 数据库对应的用户 2,创建新的表空间 新的用户 3,导入新的数据库 imp grid_sysdb/sagis@klmy file=F:\data\addr_interestpoint.d ...

  4. [shell]. 点的含义

    . 的含义 当前目录 隐藏文件 任意一个字符 生效配置文件

  5. PBR综合小实验视频-狮子XL

    这个是上学时候录的一个策略路由小实验

  6. [转]SQLServer跨服务器访问数据库(openrowset/opendatasource/openquery)

    正 文: 1.启用Ad Hoc Distributed Queries 在使用openrowset/opendatasource前搜先要启用Ad Hoc Distributed Queries服务,因 ...

  7. chrome http Request Header 修改插件

    chrome http Request Header 修改插件 2013-05-31 11:03:03|  分类: JavaScript |  标签:chrome  extensions  chang ...

  8. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

  9. Java并发编程-CAS

    CAS(Compare and swap)比较和替换是设计并发算法时用到的一种技术.简单来说,比较和替换是使用一个期望值和一个变量的当前值进行比较,如果当前变量的值与我们期望的值相等,就使用一个新值替 ...

  10. 汇顶科技&&硬件类笔试题目

    汇顶科技硬件类笔试题目,每年都有变化,但是题目类型都差不多.汇顶科技17年在南京地区大概招了20个左右吧,给的待遇还是不错的,工作地点上海深圳