存储对象为啥是类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. npm run build

    [npm run build] npm 会在项目的 package.json 文件中寻找 scripts 区域,其中包括npm test和npm start等命令. 其实npm test和npm st ...

  2. Mysql 数据类型（基础5）

    Mysql 常用的4种数据类型: 整型 int. 浮点型 double. 日期类型 datetime .字符型( varchar char text ) #创建一张表 mysql> create ...

  3. redis做消息列队

    #encoding:utf8 import time import redis conn = redis.Redis('localhost',db=1) #连接诶数据库并使用数据库1 def inse ...

  4. js实现多级复选框的交互

    功能介绍   整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级 ...

  5. springboot jpa sql查询与传值

    public interface ARepository extends PagingAndSortingRepository<A, APK>, JpaSpecificationExecu ...

  6. 牛客练习赛43-F（简单容斥）

    题目链接:https://ac.nowcoder.com/acm/contest/548/F 题意:简化题意之后就是求[1,n]中不能被[2,m]中的数整除的数的个数. 思路:简单容斥题,求[1,n] ...

  7. ceph luminous 新功能之内置dashboard 之 mgr功能模块配置

    前言 ceph luminous版本新增加了很多有意思的功能,这个也是一个长期支持版本,所以这些新功能的特性还是很值得期待的,从底层的存储改造,消息方式的改变,以及一些之前未实现的功能的完成,都让ce ...

  8. 【mybatis基础】mybatis开发dao两种方法

    mybatis是一个支持普通SQL查询,存储过程和高级映射的优秀的持久层的框架,是apache下的顶级项目.mybatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.mybat ...

  9. string类的一些函数方法

    1.请查看String.equals()方法的实现代码,注意学习其实现方法: (1)源程序: public class StringEquals { /** * @param args the com ...

  10. TZOJ 3295 括号序列(区间DP)

    描述 给定一串字符串,只由 “[”.“]” .“(”.“)”四个字符构成.现在让你尽量少的添加括号,得到一个规则的序列. 例如:“()”.“[]”.“(())”.“([])”.“()[]”.“()[( ...