将 HTML 结构拆分为一组标签答案

【问题标题】：Split an HTML structure into an array of tags将 HTML 结构拆分为一组标签
【发布时间】：2018-11-22 11:58:42
【问题描述】：

我正在尝试将 HTML 文件拆分为一组标签，目标是我将预先添加并附加 ANSI 转义码以根据标签为每一行着色，然后吐到控制台，它将是颜色编码。

到目前为止，我能够使用正则表达式逐个提取每个标签（显然是个坏主意），然后我的想法是找到该标签的索引并添加/附加转义码，但我遇到的问题是多个看起来相同的标签，就像两个相邻的 div。

循环标签的代码

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>',
]

【问题讨论】：

RegEx match open tags except XHTML self-contained tags的可能重复
@MatthewCliatt 我已经看过那个帖子，它没有回答我的问题。我已经知道使用正则表达式不好。
如果您看过这篇文章，那么您应该知道使用正则表达式解析 HTML 非常糟糕，您不应该在这里发布有关它的问题。这就是帖子保持原样的原因。
请注意，<img> 标记不需要或使用右斜线，而且从来没有。

标签： javascript html arrays string

【解决方案1】：

您可以使用 jquery 和递归函数，但您必须转义符号“，因为它会出现 \”。

结果在控制台中：

<!DOCTYPE html>
    
    <head>
    <title>Stack Overflow</title>
   <html>
    <body>
        <div>texteeee</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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var result = ['<html>','<body>'];
var lenght = $("body")[0].children.length;

for(var i=0; i< $("body")[0].children.length-1; i++){
	var ele =$("body")[0].children[i];
	if(ele.children.length <= 0 ) {
		var param = '';
		if(ele.attributes.length > 0) 
			param = ele.attributes[0].nodeName+'="'+ele.attributes[0].nodeValue+'"';
			console.log(param);
		result.push('<'+ele.nodeName+ ' ' + param+'>'+
		ele.innerHTML+
		'</'+ele.nodeName+'>');
	}else{
		result.push('<'+ele.nodeName+'>');
		recurs(ele);
		result.push('</'+ele.nodeName+'>');
		}
}

function recurs(ele){
for(var i=0; i< ele.children.length; i++){
	var eleRec=ele.children[i];
	if(eleRec.children.length <= 0 ) {
		var paramRec ='';
		if(ele.attributes.length > 0) 
			paramRec = ele.attributes[0].nodeName+'="'+ele.attributes[0].nodeValue+'"';
		result.push('<'+eleRec.nodeName+ ' ' + paramRec+'>'+
		eleRec.innerHTML+
		'</'+eleRec.nodeName+'>');
	}else{
		result.push('<'+eleRec.nodeName+'>');
		recurs(eleRec);
		result.push('</'+eleRec.nodeName+'>');
		}
	}
}

	
	result.push('<html>');
	result.push('<body>');
	
    console.log(result);
	
});
</script>
    </body>

【讨论】：

[X]HTML is not parseable by regex 一个人。 “HTML 不是正则语言，因此不能被正则表达式解析。”