Javascript HTML строка в массив тегов и внутреннего содержимого

Question

Я пытаюсь сопоставить теги HTML и их внутреннее содержимое и поместить каждое совпадение в массив (как тег, так и его внутреннее содержимое).

Мне удалось сопоставить сами теги и поместить те в массив, но я не уверен, как получить внутреннее содержимое тега.

// Example String
let str = "<p><b>Label:</b>Value<p></p><p><b>New Line Label:</b>Value 2</p></p>";
console.log(str.match(/\<.*?\>/gi)) // Output ["<p>", "<b>", "</b>", "<p>", "</p>", "<p>", "<b>", "</b>", "</p>", "</p>"]


// Expected Output
["<p>", "<b>", "Label:", "</b>", "Value", "<p>", "</p>", "<p>", "<b>", "New Line Label:", "</b>", "Value 2", "</p>", "</p>"]

Можно ли это обработать в одном совпадении регулярного выражения, или мне нужно сопоставить, а затем вернуться к закрывающему предыдущему тегу, чтобы получить внутреннее содержимое?

Answer 1

Вы можете использовать DOMParser API, а затем продолжать итерацию по дочерним элементам каждого узла

let doc = new DOMParser().parseFromString('<p><b>Label:</b>Value<p></p><p><b>New Line Label:</b>Value 2</p></p>', 'text/html')

console.log(doc.children) // DOM nodes 

с этим вы построите полную DOM из строки, которую вы затем примените к ней