css字符串转换为类map对象及反转
存储对象为啥是类map（即：{key:val,...}格式），因为Map对象的val为字符时，无法存储 '（'、'）' 左右括号，我也很无奈╮(╯▽╰)╭
解析脚本：
<!DOCTYPE html>
<html>
<head>
<title>css parser</title>
<meta charset="UTF-8" >
</head> <body>
</body>
<script type="text/javascript">
var css = ` .c1,.c1:hover{
color: #fff;
border-color: #3c8b3c;
background: #4cae4c;
background: -webkit-linear-gradient(top,#4cae4c 0,#449d44 100%);
background: -moz-linear-gradient(top,#4cae4c 0,#449d44 100%);
background: -o-linear-gradient(top,#4cae4c 0,#449d44 100%);
background: linear-gradient(to bottom,#4cae4c 0,#449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cae4c,endColorstr=#449d44,GradientType=0);
}`;
/**
* 传入的是css字符串则返回map对象，传入是css的map对象则返回css字符串
* @param: res 处理的源数据
* @param: bool 控制样式外部的注释是否保留（生成map对象时）
**/
function parseCssFile(res, bool) {
if (typeof res == 'string') return txt2Map(res);
if (typeof res == 'object') return map2Txt(res); function txt2Map(cssTxt) { /* css匹配正则 '\——\；\，\。\/\*\u2E80-\u9FFF' 处理中文注释 */
var reg = /([\w\s\-\#\.\:\~\>\,\[\]\=\'\"]+\w+\s*|({[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\+\=\.\!\:\(\)\;\,\%\#\'\"]+}))/ig;
if (bool == true) { /* 保留样式外部的注释 */
reg = /([\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\#\.\:\~\>\,\[\]\=\'\"]+\w+\s*|({[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\+\=\.\!\:\(\)\;\,\%\#\'\"]+}))/ig;
} var cssmap = {},
matchs = cssTxt.match(reg);
for (var i = 0; i < matchs.length; i++) {
if(i%2==0) {
var cssVal = matchs[i+1].trim(), cssKey = matchs[i].trim(), oldVal = cssmap[cssKey];
if(oldVal) cssVal = oldVal.replace('}','')+ cssVal.replace('{',''); /* 存在则合并 */
cssmap[cssKey] = cssVal;
}
}
return cssmap;
} function map2Txt(mapObj) {
var buf = '';
for(var key in mapObj) {
buf += key + ' ' + mapObj[key] + '\n';
};
return buf;
}
}
var cMap = parseCssFile(css,true);
console.log(cMap);
console.log(parseCssFile(cMap));
</script>
</html>
结果：
增强版：（支持多文件）
/**
* 传入的是css字符串则返回map对象(多文件时返回对象数组)，传入是css的map对象（暂不支持对象数组）则返回css字符串
* @param: res 处理的源数据
* @param: options: {
external: bool 控制样式外部的注释是否保留（生成map对象时）,
note: string 合并处的文本注释
}
**/
var parseCssFile = function(res, options = {}) {
var resType = Object.prototype.toString.call(res);
if (resType == '[object Array]' || resType == '[object String]') { /* 单文件、多文件 */
return txt2Map(res);
}
if (resType == '[object Object]') return map2Txt(res); function txt2Map(cssTxt) {
if (Object.prototype.toString.call(cssTxt) == '[object Array]') { /* 多文件 */
var mapArr = [];
cssTxt.map(function(item) {
mapArr.push(_css2Json(item));
});
return mapArr;
} else { /* 单文件 */
return _css2Json(cssTxt);
} }
/*css to json*/
function _css2Json(cssTxt) { /* css匹配正则 '\——\；\，\。\/\*\u2E80-\u9FFF' 处理中文注释 */
var reg = /([\w\s\-\#\.\:\~\>\,\[\]\=\'\"]+\w+\s*|({[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\+\=\.\!\:\(\)\;\,\%\#\'\"]+}))/ig;
if (options == true || options.external == true) { /* 保留样式外部的注释 */
reg = /([\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\#\.\:\~\>\,\[\]\=\'\"]+\w+\s*|({[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\+\=\.\!\:\(\)\;\,\%\#\'\"]+}))/ig;
}
/* 用户清除注释的样式定义 */
var clearReg = /\/\*[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\#\.\:\~\>\,\[\]\=\'\"]+\w+\s*{[\——\；\，\。\/\*\u2E80-\u9FFF\w\s\-\+\=\.\!\:\(\)\;\,\%\#\'\"]+}\s*\*\//g;
var cssmap = {}, note = '/* self cancat part */', cssTxt = cssTxt.replace(clearReg, ''),
matchs = cssTxt.match(reg);
for (var i = 0; i < matchs.length; i++) {
if (i % 2 == 0) {
var cssVal = matchs[i + 1].trim(), cssKey = matchs[i].trim(), oldVal = cssmap[cssKey];
if (oldVal) cssVal = oldVal.replace('}', note) + cssVal.replace('{', '');
cssmap[cssKey] = cssVal;
}
}
return cssmap;
}
/*json to text*/
function map2Txt(mapObj) {
var buf = '';
for (var key in mapObj) {
buf += key + ' ' + mapObj[key] + '\n';
};
return buf;
}
}
css字符串转换为类map对象及反转的更多相关文章
- 011-JSON、JSONObject、JSONArray使用、JSON数组形式字符串转换为List<Map<String,String>>的8种方法
一.JSON数据格式 1.1.常用JSON数据格式 1.对象方式:JSONObject的数据是用 { } 来表示的, 例如: { "id" : "123", & ...
- java中将jsonObject字符串转化为Map对象
java中将jsonObject字符串转化为Map对象 1.我们这里使用json-lib包进行转换,可在http://json-lib.sourceforge.net/下载依赖于下面的jar包: ja ...
- ruby中字符串转换为类
最近有个需求,需要根据一个字符串当作一个类来使用,例如: 有一个字符串 “ChinaMag”,根据这个字符串调用 类 ChinaMag下的方法. 解决办法: 1. rails可以使用 constant ...
- JSON数组形式字符串转换为List<Map<String,String>>的几种方法
package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...
- js动态获取当前系统时间+js字符串转换为date日期对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JSON数组形式字符串转换为List<Map<String,String>>的8种方法
package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...
- Java 利用Gson将json字符串转换为List<Map<String, String>>
json字符串类似于: [ { "userPhone": "123", "userNo": "123-2", " ...
- Java 中 json字符串转换为类
使用到alibaba.fastjson包 具体实现 JSONObject jsonObject = JSONObject.parseObject(msg); SmsSenderStatus smsSe ...
- 将json数组字符串转换为json数组对象(值是json对象的数组)
var str1 ='[{"name":"kevin","age":18},{"name":"rose&quo ...
随机推荐
- Linux系统缓冲区溢出
Linux系统下穿越火线-缓冲区溢出 原理:crossfire 1.9.0 版本接受入站 socket 连接时存在缓冲区溢出漏洞. 工具: 调试工具:edb: ###python在漏洞溢出方面的渗透测 ...
- 包含min函数的栈(python)
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). # -*- coding:utf-8 -*- class Solution: #入栈时 ...
- c++笔试题贪吃蛇问题
贪吃蛇 现在有一个N*M(N,M=100)的方形矩形,在这个矩形的每一个方格上都放有一个随机值,一条可爱的小蛇从矩形的 左上角开始出发,每次移动都只能移动一格,向右或向下,而每到达一格贪吃的小蛇都会吧 ...
- 脚手架搭建vue框架
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- Android 中 IntentService 的优点
简而言之:可以处理异步请求,任务完成会自动停止自己. IntentService是一个通过Context.startService(Intent)启动可以处理异步请求的Service,使用时你只需要 ...
- MyBatis入门程序(1)
一.入门程序: 1.mybatis的配置文件SqlMapConfig.xml 配置mybatis的运行环境,数据源.事务等. <?xml version="1.0" enco ...
- [z]根据awr报告查看最慢的sql语句
http://blog.itpub.net/12679300/viewspace-2125679/ 当系统运行了一段时间后,系统基本也趋于稳定了,SQL调优也变了DBA的一个主要的工作内容,很多时候都 ...
- 面试题集锦；有关作用域和this的指向
作用域面试题: 1. fn() function fn () { console.log(12) } var as = function () { console.log(45) } 2. var a ...
- HSTS
一.简介 二.部署 三.其他 1)利用 HSTS 安全协议柔性解决全站HTTPS 的兼容性问题 http://www.toutiao.com/a6383719177903833346/
- js filter关键字
filter filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter ...