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; } }
