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

最新推荐文章于 2024-05-03 17:58:21 发布
最新推荐文章于 2024-05-03 17:58:21 发布
阅读量59 收藏
点赞数
文章标签： javascript xhtml ViewUI

全是正则表达式

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

 1 <!DOCTYPE>
 2 <HTML xmlns="http://www.w3.org/1999/xhtml">
 3 <HEAD>
 4 <meta charset="utf-8" />
 5 <TITLE>原生JavaScript对CSS进行格式化和压缩</TITLE>
 6 <style type="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 <input type="submit" value="+格式化" id="format" />
15 <input type="submit" value="-压缩化" id="compress" />
16 <textarea name="" 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){return document.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   function cssFormat(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     return code; 
44   }
45 
46   function cssCompress(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     return code; 
60   } 
61 
62 }());
63 
64 </script>
65 
66 </BODY>
67 </HTML>

 

weixin_33697898
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS压缩之：正则五步替换法
netuser1937的博客
02-09 768
CSS压缩之：正则五步替换法
javascript写css样式,原生javascript实现读写CSS样式的方法详解
weixin_31132687的博客
08-04 3718
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供...
CSS和JavaScript的引用方式
一指流沙的博客
08-02 2157
可读性差，在html中编写JS大量代码时，不方便阅读；可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如onclick。利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用。注意单双引号的使用在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。样式单独写到CSS文件中，再将CSS文件引入到HTML页面中。实际开发中都是外部样式表，适用于样式比较多的情况。属性中设定CSS样式，适合修改简单样式。............
HTML+CSS+JavaScript
weixin_54849368的博客
05-20 2204
HTML+CSS+JavaScript 笔记由B站狂神说视频整理 HTML HTML：Hyper Text Markup Language（超文本标记语言） HTML 5 + CSS 3 W3C：World Wide Web Consortium（万维网联盟） W3C标准包括：结构化标准语言（HTML、XML配置文件）、表现语言标准（CSS）、行为标准（DOM文档对象模型、ECMAScript） 标签 基础标签 <!--告诉浏览器，要使用什么规范--> <!DOCTYPE html>
100个直接可以拿来用的JavaScript实用功能代码片段(1-10)
09-02
84、原生JavaScript用正则表达式按字母排序，对每行进行数组排序 85、原生JavaScript字符串反序 86、原生JavaScript用正则表达式清除html代码中的脚本 87、原生JavaScript动态执行JavaScript脚本 88、原生JavaScript...
imouto:快速、明确、极简
04-13
代码高亮 (highlight) CSS,HTML,JavaScript,PHP Mustache.js 多用户 分类 原生评论系统/多说评论（重封装） 拖拽图片即上传（免费图像托管） 新评论，微博私信提醒 原生ajax搜索博文 关于托管 妹Blog可以运行在支持 ...
LCalendar:LCalendar移动端日期时间选择控件
04-22
LCalendar2.1.1 移动端日期时间选择控件在线预览：纯原生js的移动端日期插件，不依赖任何库，体积非常小只有10k##用法在html页面中引入input标签，通过自定义属性data-lcalendar控制最小日期和最大日期，写法如下：....
dc.js:内置多维图表，可与 crossfilter 本地配合使用-开源
08-10
dc.js 是一个具有原生 crossfilter 支持的 javascript 图表库，允许对大型多维数据集进行高效探索（受 crossfilter 的演示启发）。 它利用 d3 以 CSS 友好的 SVG 格式呈现图表。 使用 dc.js 呈现的图表是数据驱动和...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 496
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 386
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 810
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 136
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 78
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 671
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 825
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 210
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1022
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
菜鸡学习netty源码（三）—— Reactor 模型
最新发布
u013127325的博客
05-03 333
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
js对date进行格式化
04-29
不过，本文将重点介绍原生JavaScript如何对Date对象进行格式化。 首先，我们需要知道Date对象的常见属性，如getFullYear()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()等，它们分别代表年份、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值