JavaScript Regex: Как разбить html строку на массив html элементов и текстовых узлов?

Question

Например, эта html строка:

Lorem <b>ipsum</b> dolor <span class="abc">sit</span> amet,<br/>consectetur <input value="ok"/> adipiscing elit.

в этот массив:

[ 
  'Lorem ',
  '<b>ipsum</b>',
  ' dolor ', 
  '<span class="abc">sit</span>', 
  ' amet,', 
  '<br/>', 
  'consectetur ', 
  '<input value="ok"/>', 
  'adipiscing elit.' 
]

Вот пример html совпадения элементов:

const pattern = /<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)<\/\1>|<([A-Z][A-Z0-9]*).*?\/>/gi;
let html = 'Lorem <b>ipsum</b> dolor <span class="abc">sit</span> amet,<br/>consectetur <input value="ok"/> adipiscing elit.'
let nodes = html.match(pattern);

console.log(nodes)

Как также добавить текстовые узлы?

Answer 1

Если HTML отформатирован правильно, рассмотрите возможность использования DOMParser, чтобы выбрать все дочерние элементы, затем возьмите .outerHTML каждого (для узлов элемента) или .textContent (для текстовых узлов) каждого ребенка:

const str = `Lorem <b>ipsum</b> dolor <span class="abc">sit</span> amet,<br/>consectetur <input value="ok"/> adipiscing elit.`;

const doc = new DOMParser().parseFromString(str, 'text/html');
const arr = [...doc.body.childNodes]
  .map(child => child.outerHTML || child.textContent);
console.log(arr);

У вас нет для использования DOMParser - вы также можете поместить строку в обычный элемент на странице, а затем взять дочерние элементы этого элемента, но это позволит выполнить произвольный код, чего следует избегать.