Как разбить текст на теги?

Question

[Ch cgtj Hihf]

У меня есть такая переменная:
var msg = ("");// в ней находится html код
В ней находится html код , и мне нужно его разбить по тегам и сохранить в константе каждый тег отдельно

Как это сделать?

Comments

[Сергей Соколов]

в браузере или для NodeJS ?

Ну и минимальный пример покажите, что хочется получить из, например, такого:

<div>
  <p>Text</p>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
</div>

[Ch cgtj Hihf]

Сергей Соколов, в браузере , я бы хотел чтобы каждый тег хранился в одном масиве как то так:

var tag = ["<div><p>Text</p><ul><li>Apple</li><li>Banana</li></ul></div>", "<p>Text</p>", "<ul><li>Apple</li><li>Banana</li>","<li>Apple</li>","<li>Banana</li>"]

Каждый тег находится отдельным элементом , но если в теге есть ещё теги то они сохраняют с основными тегом , а дальше по отдельности.

Answer 1

[Сергей Соколов]

можно создать временный элемент <template>, вставить в него этот HTML,
и забрать из него DocumentFragment

Фрагмент — это примерно как DOM-документ, его можно рекурсивно обойти через свойство children

Например, в строке содержится такой HTML:

<div>
  <p>Text</p>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
</div>

И примерно такой код:

const tmpl = document.createElement('template');
tmpl.innerHTML = msg; // строка с HTML
const df = tmpl.content; // DocumentFragment

df.children // массив из одного элемента: наружний div
df.children[0].children // массив с двумя эл.: параграфом и списком
df.children[0].children[1].children[1].textContent // "Banana"

Comments

[Ch cgtj Hihf]

А как вывести результат?

[Сергей Соколов]

Pin Bib, console.log()