存储对象为啥是类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. 【C++】构造函数语意

    构造函数的构造操作 编译器何时会为一个类合成默认构造函数? 答:当编译器需要的时候. 有以下四种情况: 带有默认构造函数的类对象 以下代码为例: class Foo {public: Foo();} ...

  2. SpringMVC包括哪些组件

      1 映射器 1.1作用:Handlermapping根据url查找Handler   2 适配器 2.1作用:HandlerAdapter执行Handler   3 解析器 3.1作用:View ...

  3. java集合： LinkedList源码浅析

    LinkedList 数据结构是双向链表,插入删除比较方便.LinkedList 是线程不安全的,允许元素为null  . 构造函数: 构造函数是空的. /** * Constructs an emp ...

  4. zabbix监控指定端口

    生产上经常会监控某些具体端口状态,下面介绍具体步骤: 主机名 ip 操作系统 zabbix版本 zabbix-server 172.27.9.63 Centos7.3.1611 zabbix_serv ...

  5. empty 与 remove 的区别

    empty()移除指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p> ...

  6. 【资料整理】ADO.NET

    ADO.NET: 1.SYSTEM.DATA 命名空间下类的集合的统称,用于操作 连接数据库的 它提供了统一的编程接口,可以操作不同的数据库 数据库实例:默认实例(MSSQLSEVER)和命名实例(M ...

  7. AngulairJS表单输入验证与mvc

    AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...

  8. Codeforces Round #450 (Div. 2)

    Codeforces Round #450 (Div. 2) http://codeforces.com/contest/900 A #include<bits/stdc++.h> usi ...

  9. Topological Sorting拓扑排序

    定义: Topological Sorting is a method of arranging the vertices in a directed acyclic graph (DAG有向无环图) ...

  10. Linux系统挂载只读改成读写

    1.mount命令可用于查看哪个模块输入只读,一般显示为: [root@localhost ~]# mount /dev/cciss/c0d0p2 on / type ext3 (rw) proc o ...