存储对象为啥是类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对象及反转的更多相关文章

  1. 011-JSON、JSONObject、JSONArray使用、JSON数组形式字符串转换为List<Map<String,String>>的8种方法

    一.JSON数据格式 1.1.常用JSON数据格式 1.对象方式:JSONObject的数据是用 { } 来表示的, 例如: { "id" : "123", & ...

  2. java中将jsonObject字符串转化为Map对象

    java中将jsonObject字符串转化为Map对象 1.我们这里使用json-lib包进行转换,可在http://json-lib.sourceforge.net/下载依赖于下面的jar包: ja ...

  3. ruby中字符串转换为类

    最近有个需求,需要根据一个字符串当作一个类来使用,例如: 有一个字符串 “ChinaMag”,根据这个字符串调用 类 ChinaMag下的方法. 解决办法: 1. rails可以使用 constant ...

  4. JSON数组形式字符串转换为List<Map<String,String>>的几种方法

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...

  5. js动态获取当前系统时间+js字符串转换为date日期对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. JSON数组形式字符串转换为List<Map<String,String>>的8种方法

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...

  7. Java 利用Gson将json字符串转换为List<Map<String, String>>

    json字符串类似于: [ { "userPhone": "123", "userNo": "123-2", " ...

  8. Java 中 json字符串转换为类

    使用到alibaba.fastjson包 具体实现 JSONObject jsonObject = JSONObject.parseObject(msg); SmsSenderStatus smsSe ...

  9. 将json数组字符串转换为json数组对象(值是json对象的数组)

    var str1 ='[{"name":"kevin","age":18},{"name":"rose&quo ...

随机推荐

  1. 取消掉maven

  2. python内置函数getattr用法

    class Tests(object):    #定义类     aaa = '10'          #定义变量       def test(self):     #定义类的方法test     ...

  3. zabbix监测公网IP的客户端主机

    未经测试 如果server端是内网的主机,需要注意:防火墙.端口映射 再用zabbix服务器去Telnet客户机的10050端口,然后在客户机中查看10050被什么ip访问了,拿到这个ip之后,加到之 ...

  4. 已知一个函数rand7()能够生成1-7的随机数，请给出一个函数rand10()，该函数能够生成1-10的随机数。

    题目: 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数,该函数能够生成1-10的随机数. 思路: 假如已知一个函数能够生成1-49的随机数,那么如何以此生成1-10的随机数呢? 解法 ...

  5. kafka NoNode错误

    报错 bin/kafka-run-class.sh kafka.tools.ConsumerOffsetChecker --zookeeper localhost:2181 --group=app-t ...

  6. numpy学习之矩阵之旅

    一:特殊的矩阵 1.全0全1的矩阵 2.单位矩阵 单位矩阵:整个矩阵是n*n的,并且斜对角全是1 矩阵的加减法 1.矩阵相加,相减必须要有相同的行和列 二:数组的乘法(点成) 数组的乘法 list_1 ...

  7. 【网络编程一】主机字节序与网络字节序以及ip地址转换函数

    在计算机设计之初,对内存中数据的处理也有不同的方式,(低位数据存储在低位地址处或者高位数据存储在低位地址处),然而,在通信的过程中(ISO/OSI模型和TCP/IP四层模型中),数据被一步步封装(然后 ...

  8. django的request介绍和APIView流程分析和CBV的流程分析

    首先get请求的数据都在request.GET中,request.body中没有,因为只有post请求有请求体,request.body中的数据是请求体的数据 首先,我们还是用cbv的方式来讲解 我们 ...

  9. Nginx特点及其配置

    1.基础知识 代理服务器: 一般是指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端.应用比如:GoAgent,FQ神器. 一个完整的代理请求过程为:客户端首先与代 ...

  10. errror:[test_rig3.launch] is neither a launch file in package [svo_ros] nor is [svo_ros] a launch file name The traceback for the exception was written to the log file

    1. 打开一个终端,运行roscore 2. 打开另一个终端,运行 roslaunch svo_ros test_rig3.launch 出现errror: 忘记关键步骤了 $ cd <path ...