如何在JavaScript中将CSS代码转换为数组

例如，我想要这些代码

.a {color: red; background: black}
.b {color: green; background: white}
.c {color: red; border: silver}
.d {align: center; abc: silver}

要转换为这样的数组

var css = [
    ".a {color: red; background: blck}",
    ".b {color: green; background: white}",
    ".c {color: red; border: silver}",
    ".d {align: center; abc: silver}"
];

---

可能吗？TIA

有几种方法可以在Javascript中“解析”字符串。最高级的方法是使用正则表达式，但对于更简单的任务，您可能希望使用类似

substr

和

split

的方法

split

将允许您拆分字符串，例如：

".a {color: red; background: blck}".split('{')

".a {color: red; background: blck}".substr(4)

将生成一个包含两部分的数组，“{”前面的部分和后面的部分：

[".a ", "color: red; background: blck}"]

substr

将允许您截断字符串的一部分。例如：

".a {color: red; background: blck}".split('{')

".a {color: red; background: blck}".substr(4)

将跳过前四个字符：

"color: red; background: blck}"

而：

".a {color: red; background: blck}".substr(4, 10)

将跳过前四个，然后使用下十个，然后跳过其余的：

"color: red"

---

您可以在此处阅读这些和其他字符串原型方法：

有几种方法可以在Javascript中“解析”字符串。最高级的方法是使用正则表达式，但对于更简单的任务，您可能希望使用类似

substr

和

split

的方法

split

将允许您拆分字符串，例如：

".a {color: red; background: blck}".split('{')

".a {color: red; background: blck}".substr(4)

将生成一个包含两部分的数组，“{”前面的部分和后面的部分：

[".a ", "color: red; background: blck}"]

substr

将允许您截断字符串的一部分。例如：

".a {color: red; background: blck}".split('{')

".a {color: red; background: blck}".substr(4)

将跳过前四个字符：

"color: red; background: blck}"

而：

".a {color: red; background: blck}".substr(4, 10)

将跳过前四个，然后使用下十个，然后跳过其余的：

"color: red"

您可以在此处阅读这些和其他字符串原型方法：

尝试以下JS：

var cssStr=“.a{color:red；background:black}.b{color:green；background:white}.c{color:red；border:silver}.d{align:center；abc:silver}”；
var css=cssStr.split（'}'）.filter（u=>u！=''）.map（i=>i+“}”）；
console.log（css）尝试以下JS：


var cssStr=“.a{color:red；background:black}.b{color:green；background:white}.c{color:red；border:silver}.d{align:center；abc:silver}”；
var css=cssStr.split（'}'）.filter（u=>u！=''）.map（i=>i+“}”）；
console.log（css）试试这个

var string = `.a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}`;
var css = [];
string.split('}').map(item => {
    var item2 = item.trim();
    var item3 = (item2 +"}");
    css.push(item3)
});
css.pop(); 
console.log(css);

试试这个

var string = `.a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}`;
var css = [];
string.split('}').map(item => {
    var item2 = item.trim();
    var item3 = (item2 +"}");
    css.push(item3)
});
css.pop(); 
console.log(css);

遵循JS会有所帮助

      var cssStr = ".a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}";

      //Using '.'
      var specialCharacter = "."; 
      var css = cssStr.split(specialCharacter).map(i => specialCharacter + i).filter(i => i!=specialCharacter);

      //Using '}'
      var specialCharacter = "}"; 
      var css = cssStr.split(specialCharacter).map(i => i + specialCharacter).filter(i => i!=specialCharacter);

使用过滤器可以避免最终数组中的空值或附加值。
下面的JS会有所帮助

      var cssStr = ".a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}";

      //Using '.'
      var specialCharacter = "."; 
      var css = cssStr.split(specialCharacter).map(i => specialCharacter + i).filter(i => i!=specialCharacter);

      //Using '}'
      var specialCharacter = "}"; 
      var css = cssStr.split(specialCharacter).map(i => i + specialCharacter).filter(i => i!=specialCharacter);

使用筛选器可以避免最终数组中的空值或附加值。
使用RegEx
/\s（？=\）/g似乎很干净：


var style=`.a{color:red；background:black}.b{color:green；background:white}.c{color:red；border:silver}.d{align:center；abc:silver}；
var res=style.trim（）.split（/\s（？=\）/g）；
控制台日志（res）使用RegEx似乎很干净
/\s（？=\）/g
：


var style=`.a{color:red；background:black}.b{color:green；background:white}.c{color:red；border:silver}.d{align:center；abc:silver}；
var res=style.trim（）.split（/\s（？=\）/g）；
控制台日志（res）您计划如何阅读css行？您计划如何阅读css行？