2

How to separate css code blocks in javascript?

Following are some css in the serialised form:

const css = "body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }"

How can I parse it and get it in the following form as array (along with adding whitespaces (preserving whitespaces. i.e. in formatted form):

const parsedCss = [
'body {
  background-color: lightblue;
}',

'h1 {
  color: white;
  text-align: center;
}',

'p {
  font-family: verdana;
  font-size: 20px;
}',

]
mx_code
  • 2,441
  • 1
  • 12
  • 37

3 Answers3

2

You could use const parsedCss = css.split(/(?<=\})/)

This splits the css on the "}" symbol, and uses lookahead assertion to retain it.

The output would be

[
'body {
  background-color: lightblue;
}',

'h1 {
  color: white;
  text-align: center;
}',

'p {
  font-family: verdana;
  font-size: 20px;
}',

]
Manav
  • 1,357
  • 10
  • 17
1

Try splitting with regex

/(?<=})\s+/


const css = "body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }"

const beautifiedCss = css_beautify(css)

const parsedCss = beautifiedCss.split(/(?<=})\s+/)

console.log(parsedCss.join(',\n\n'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-css.js"></script>
User863
  • 19,346
  • 2
  • 17
  • 41
  • Shows error. Will this be able to add white spaces? – mx_code Oct 24 '20 at 13:27
  • @mex at where you want to add spaces? Are you asking about formatting? – User863 Oct 24 '20 at 13:29
  • Yes. eXactly. I want it also be formatted. as well. – mx_code Oct 24 '20 at 13:31
  • How can I do that also? – mx_code Oct 24 '20 at 13:31
  • Ok. Thanks. One more help. How can I make the text area to show the whole content inside it. currently there is a scrollbar (overflow), instead I want it to grow and shrink according to the content inside. (I tried height 100%, then it grows and all other elements are hidden away from view. When I pul height auto then the text area is taking some kind of minimal height. Instead I want it to fit the content – mx_code Oct 24 '20 at 13:42
  • @mex what you are asking is irrelevant to this question. you can found that easily. https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length – User863 Oct 24 '20 at 13:50
0
const css =
  "body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }";

let parsedCss = css
  .trim()
  .split("}")
  .map((word) => (word + "}").trim());
parsedCss.pop();

console.log(parsedCss);

/*
OUTPUT: 
[ 'body { background-color: lightblue; }',
  'h1 { color: white; text-align: center; }',
  'p { font-family: verdana; font-size: 20px; }' ]
*/

we can add \n for newline to get the formatted output:

const css =
  "body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }";

let parsedCss = css
  .trim()
  .split("}")
  .map((word) =>
    (word.replace(/[;]/gi, ";\n").replace(/[{]/gi, "{\n") + "}")
      .trim()
      .toString()
  );
parsedCss.pop();

parsedCss.map((parsed) => console.log(parsed + ","));

/*
OUTPUT: 

body {
 background-color: lightblue;
 },
h1 {
 color: white;
 text-align: center;
 },
p {
 font-family: verdana;
 font-size: 20px;
 },

*/
Ketan Ramteke
  • 10,183
  • 2
  • 21
  • 41
  • How to add white spaces as in the above example? I mean to format it! – mx_code Oct 24 '20 at 13:28
  • @mex instead commenting in all answers. add all your constraints in question properly. – User863 Oct 24 '20 at 13:30
  • I mean inside the code blocks ```'h1 { color: white; text-align: center; }',``` how can I separate ```color``` ```text-align``` in to separate lines (I mean to add new line ). So that this would look much cleaner. – mx_code Oct 24 '20 at 13:34