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

Question

For example, I want these codes

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

to convert to an array like this

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

Is it possible? TIA

Answer 1

There are several ways you can "parse" strings in Javascript. The most advanced would be to use a regular expression, but for simpler tasks you might instead want to use methods like substr and split .

split will let you split a string up, so for instance:

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

would result in an array with two parts, the part before "{", and the part after:

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

substr will instead let you cut off part of a string. For instance:

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

would skip the first four characters:

"color: red; background: blck}"

while:

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

would skip the first four, then use the next ten, then skip the rest:

"color: red"

You can read about these and other string prototype methods here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Answer 2

Try following 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);

Answer 3

Try this

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);

Answer 4

Following JS would help,

      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);

Having filter would avoid the empty or additional value in the final array.

Answer 5

It seems clean using 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); console.log(res);