Функция Javascript для добавления полей к тегам в зависимости от новых строк

#javascript

Вопрос:

У меня есть текст с новыми строками на javascript. Раньше я text.split('n') разбивал его на массив.

Так что теперь у меня есть вот что:

 [
  'Hello world',
  '',
  '',
  'This is the first line',
  '',
  'This is the second line',
  '',
  '',
  '',
  '',
  'This is the last line'
]

Я хочу, чтобы каждая новая строка была размером 5 пикселей, поэтому я хочу преобразовать ее в эту:

 <p style={{ marginBottom: '10px' }}>Hello world</p>
<p style={{ marginBottom: '5px' }}>This is the first line</p>
<p style={{ marginBottom: '20px' }}>This is the second line</p>
<p>This is the last line</p>

Я думаю, что могу написать функцию, чтобы сделать это так:

Запустите аккумулятор в 0.
Пройдитесь по массиву сверху вниз, если вы найдете текст, установите на полях значение accumulator * 5 пикселей и оберните этот текст в a <p> , затем сбросьте значение аккумулятора до 0.
Если вы найдете пустую строку, добавьте 1 в накопитель.

Может быть, есть лучший способ сделать это?

1. Вы можете начать с конца массива. Таким образом, логика может показаться более простой.

2. Вместо того, чтобы писать слишком много логики, вы можете просто сделать это CSS ! добавьте пользовательский html-тег с полем 5 пикселей …

3. Теперь я думаю, было бы лучше иметь больше html-тегов или более «сложную» логику? Я уже создал эту функцию, и она работает…

Ответ №1:

Использование js для задания стилей может быть сложным, также по вашему методу это приведет к сложным вычислениям .. Оставьте css и используйте html-теги !

См. Пример =>

HTML

 <div id="main"></div>

CSS

 .spacer {
  display: block;
  height: 5px; /* Adjust the margin by changing height */
}

 const main = document.querySelector('#main')

let array = [
  'Hello world',
  '',
  '',
  'This is the first line',
  '',
  'This is the second line',
  '',
  '',
  '',
  '',
  'This is the last line'
]

let html = "";
array.forEach(val => val === "" ? html  = "<div class='spacer'></div>": html  = `<p> ${val} </p>`)

main.innerHTML = html;