Сгенерировать верный массив

Question

console.log(text.textContent.match(/[a-zа-яё0-9]+|\s|[^\w\s]+/gi))

  #test, #text {
    white-space: pre-wrap;
    max-width: 30%
  }
  p {
    padding:0;
    margin:0;
  }

<div id=text>
Текст

Текст.
Текст Текст.
Текст ТекстТекст Текст.
</div>

['\n', 'Текст\n', '\n', 'Текст.\n', 'Текст']

Работает верно, но в блоке так же присутствуют теги "

"

console.log(text.textContent.match(/[a-zа-яё0-9]+|\s|[^\w\s]+/gi))

  #test, #text {
    white-space: pre-wrap;
    max-width: 30%
  }
  p {
    padding:0;
    margin:0;
  }

<div id="text">
<p>Текст</p>
<p>Текст.
Текст Текст.
Текст ТекстТекст Текст.</p>
</div>

Тут он не совсем верно работает, в моем случаи выводит

['\n', 'Текст\n', 'Текст.\n', 'Текст Текст.\n', 'Текст']

Дело тут в теге <p>, так как изначально берем текст из блока без html. То пустой строчки он не видит, как мне решить это?

Как получить в обеих случаях, следующий результат

<style>
 #text {
    white-space: pre-wrap;
    max-width: 30%
  }
  p {
    padding:0;
    margin:0;
  }
</style>

<div id="text">
<p>Текст</p>
<p>Текст.
Текст Текст.
Текст</p>
</div>
        
<div id="text">
Текст
        
Текст.
Текст Текст.
Текст
</div>
 
Получить в обеих случаях  
['\n', 'Текст\n', '\n', 'Текст.\n', 'Текст']

Answer 1

Вроде просто обычным split-ом получилось то что надо:

//Получить в обеих случаях  
//['\n', 'Текст\n', '\n', 'Текст.\n', 'Текст']

const texts = document.querySelectorAll('.text');

texts.forEach(text => {
  const content = text.textContent;
  const parts = content.split('\n');
  
  console.log('Before adding "\\n"', parts); // Впринципе если забить на знак `\n`, то тут уже алгоритм закончен
  
  if (parts[parts.length - 1].trim() === '') parts.pop();
  
  for (let i = 0; i < parts.length - 1; ++i) {
    parts[i] += '\n';
  }
  
  console.log('After adding "\\n"', parts);
})

.text {
  white-space: pre-wrap;
  max-width: 30%
}

p {
  padding: 0;
  margin: 0;
}

<div class="text">
<p>Текст</p>

<p>Текст.
Текст Текст.
Текст</p>
</div>
        
<div class="text">
Текст

Текст.
Текст Текст.
Текст
</div>

БЛОГ НА HUSL

Сгенерировать верный массив

Ответы (1 шт):