Я пытаюсь разделить HTML-файл на массив тегов. Цель состоит в том, чтобы затем добавить и добавить код ESC для окраски каждой строки в соответствии с тегом, а затем выплюнуть на консоль, и это будет цветcoded.
Я до сих пор могу извлекать каждый тег один за другим с помощью регулярных выражений (очевидно, это плохая идея), и моя идея заключалась в том, чтобы затем найти индекс этого тега и добавить / добавить escape-коды, но проблемаЯ столкнулся с несколькими тегами, которые выглядят одинаково, как два элемента рядом друг с другом.
код для циклического перебора тегов
var htmlTagRe = /<\/?[\w\s="/.':;#-\/]+>/gi;
const innerHTMLarr = text.match(htmlTagRe).reduce((prev, next) => {
console.log('prev', prev)
console.log('next', next)
console.log()
return next
});
однако это только выплевываетследующие и пропускает самозакрывающиеся теги, такие как <img />:
prev <html>
next <body>
prev <body>
next <div>
prev <div>
next </div>
prev </div>
next <p>
prev <p>
next </p>
prev </p>
next <p>
prev <p>
next </p>
prev </p>
next <div style="border: 1px solid red">
prev <div style="border: 1px solid red">
next <p>
prev <p>
next </p>
prev </p>
next <span>
prev <span>
next </span>
prev </span>
next </a>
prev </a>
next </div>
prev </div>
next </body>
prev </body>
next </html>
html файл
<html>
<body>
<div>text</div>
<p>a paragraph</p>
<p>a paragraph</p>
<div style="border: 1px solid red">
<p>another one</p><span>test</span>
<a href="http://google.com">
<img href="http://site/img.jpg" />
</a>
</div>
</body>
</html>
желаемый вывод
[
'<html>',
'<body>',
'<div>text</div>',
'<p>a paragraph</p>',
'<p>a paragraph</p>',
'<div style="border: 1px solid red">',
'<p>another one</p>',
'<span>test</span>',
'<a href="http://google.com">',
'<img href="http://site/img.jpg" />',
'</a>',
'</div>',
'</body>',
'</html>',
]