存储对象为啥是类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. MVC002之获取当前用户失败(Context.User.Identity.Name)

    通过Context.User.Identity.Name想获取当前用户的域帐号信息(如:Greatwall\Snow) 可值等于"",什么原因呢. 该问题和MVC关系不大,主要是I ...

  2. 581. Shortest Unsorted Continuous Subarray

      Given an integer array, you need to find one continuous subarray that if you only sort this subarr ...

  3. SolarWinds网络管理手册列表

    前段时间使用过SolarWinds管理思科的交换机,在使用的过程中自己做了一个简单的使用手册,SolarWinds是一款非常强悍的网管软件,手册中没有完全涉及SolarWinds的所有功能,Solar ...

  4. zabbix3.0.4安装部署与SendEmail报警配置

    MySQL:5.6.21 nginx:1.62 PHP:5.7 pcre:8.32 zabbix:3.0.4 LNMP安装步骤略过 # tar xvf zabbix-3.0.4.tar.gz # cd ...

  5. 与服务器同步工程（expect脚本）

    先看下我实际用的例子: #!/usr/bin/expect spawn rsync -vazu ssh-src/src wayne@192.168.5.2:~/projects/ expect &qu ...

  6. label标签的显示和隐式关联问题

    按钮的html <!-- 学校 --> <div class="layui-inline"> <label class="layui-for ...

  7. 牛客练习赛19 E和F（签到就走系列）托米的饮料+托米搭积木

    E题传送门:点我 F题传送门:点我 可爱的小托米得到了n瓶饮料. 但他不小心把开盖的工具弄丢了,所以他只能利用饮料瓶来开盖. 已知第i个瓶子的品牌为ai,且其能打开bi品牌的瓶子. 问有几瓶饮料托米无 ...

  8. PAT L3-001 凑零钱(01背包dp记录路径)

    韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现这家店有个特别的规矩:你可以用任何星球的硬币付钱,但是绝不找零,当然也不能欠债.韩梅梅手边有104枚来自各个星球的硬币,需要请你帮她盘算一下,是 ...

  9. AVAudioSession应用指南

    转coco-LG audiosession负责调节你的app和ios系统里的音频行为.一旦加载了audiosession你可以获得一个audiosession的单例.你可以配置这个audiosessi ...

  10. 【Linux 进程】fork父子进程间共享数据分析

    之前我们通过fork()函数,得知了父子进程之间的存在着代码的拷贝,且父子进程都相互独立执行,那么父子进程是否共享同一段数据,即是否存在着数据共享.接下来我们就来分析分析父子进程是否存在着数据共享. ...