Как разделить блоки кода css в javascript?

#javascript #css #codeblocks

Вопрос:

Ниже приведены некоторые css в сериализованной форме:

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

Как я могу проанализировать его и получить в следующей форме в виде массива (вместе с добавлением пробелов (с сохранением пробелов. т. е. в форматированном виде):

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

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

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

]

Ответ №1:

Вы могли бы использовать const parsedCss = css.split(/(?<=})/)

Это разбивает css на символ «}» и использует утверждение lookahead для его сохранения.

Результат будет

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

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

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

]

1. Как добавить пробелы, как в приведенном выше примере? Я имею в виду его форматирование!

2. @mex Зачем вам нужны пробелы? На самом деле это не будет иметь никакого значения..

Ответ №2:

Попробуйте разделить с помощью регулярного выражения

 /(?<=})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(',nn'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-css.js"></script>

1. Показывает ошибку. Сможет ли это добавить пробелы?

2. @mex, где вы хотите добавить пробелы? Вы спрашиваете о форматировании?

3. Да. Точно. Я хочу, чтобы он также был отформатирован. также.

4. Как я могу это сделать?

5. ОК. Спасибо. Еще одна справка. Как я могу сделать текстовую область, чтобы показать все содержимое внутри нее. в настоящее время есть полоса прокрутки (переполнение), вместо этого я хочу, чтобы она увеличивалась и уменьшалась в соответствии с содержимым внутри. (Я попробовал высоту 100%, затем она растет, а все остальные элементы скрыты от просмотра. Когда я автоматически увеличиваю высоту, текстовая область занимает какую-то минимальную высоту. Вместо этого я хочу, чтобы он соответствовал содержимому

Ответ №3:

 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; }' ]
*/

мы можем добавить n для новой строки, чтобы получить форматированный вывод:

 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;
 },

*/

1. Как добавить пробелы, как в приведенном выше примере? Я имею в виду его форматирование!

2. @mex вместо этого комментирует во всех ответах. правильно добавьте все ваши ограничения.

3.Я имею в виду внутри блоков кода 'h1 { color: white; text-align: center; }', , как я могу разделить color text-align их на отдельные строки (я имею в виду добавить новую строку). Чтобы это выглядело намного чище.