存储对象为啥是类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. CGLIB代理基础

    本文意在讲解CGLIB的基础使用及基本原理. 一.CGLIB的基本原理: 依赖ASM字节码工具,通过动态生成实现接口或继承类的类字节码,实现动态代理. 针对接口,生成实现接口的类,即implement ...

  2. 大数据入门到精通1--大数据环境下的基础文件HDFS 操作

    1.使用hdfs用户或者hadoop用户登录 2.在linux shell下执行命令 hadoop fs -put '本地文件名' hadoop fs - put '/home/hdfs/sample ...

  3. metasploit framework（八）：snmp扫描，暴力破解

    snmp扫描linux 设置相关参数,这里使用的默认字典,你可以自己制定字典. run 然后使用枚举模块 设置相关参数 run,详细的信息就枚举出来了 snmp扫描windows 先枚举用户 设置目标 ...

  4. Python __init__ 特殊方法

    在Python中有很多以双下划线开头且以双下划线结尾的固定方法.他们会在特定的时机被触发执行. __init__ 就是其中之一,它会在实例化之后自动被调用.以完成实例的初始化. >>> ...

  5. Session和Cookie的理解

    原文地址:https://juejin.im/post/5aede266f265da0ba266e0ef

  6. idea插件推荐

    CodeGlance 类似SublimeText的Mini Map插件  Background Image Plus 这又是一款装备B插件了,想想别人看到你的IDE有个美女或者异次元背景是怎样的,安装 ...

  7. poj1733（带权并查集+离散化）

    题目链接:http://poj.org/problem?id=1733 题意:给定由0.1组成的数串长度n,询问次数m,每次询问给出a,b,s,表示区间[a,b]内1的数量为s(odd-奇数或even ...

  8. codeforces 722D Generating Sets 【优先队列】

    You are given a set Y of n distinct positive integers y1, y2, ..., yn. Set X of n distinct positive ...

  9. CentOS 下部署weblogic12.1.1.0

    1.软件包 JDK 1.7.0 Weblogic 12.1.1.0 2.JDK安装完配置环境变量 export JAVA_HOME=/usr/java/jdk1.7.0_79 export CLASS ...

  10. [剑指Offer]53-在排序数组中查找数字(二分查找)

    题目一 数字在排序数组中出现的个数 题目描述 统计一个数字在排序数组中出现的次数. 解决思路 写两个二分查找分别找第一个和最后一个该数字,然后可直接出计算有几个该数字.时间复杂度为O(logn). 这 ...