我正在尝试将HTML文件拆分为一个标签数组，目标是然后我将在前面加上并附加ANSI转义码以根据标签为每一行着色，然后吐到控制台，它将被颜色编码。
到目前为止，我能够使用正则表达式(显然是个坏主意(逐个提取每个标签，我的想法是找到该标签的索引并预置/附加转义代码，但我遇到的问题是多个标签看起来就像两个相邻的div。
用于循环标记的代码
var htmlTagRe = /</?[ws="/.':;#-/]+>/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>
<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>',
]
你可以使用 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>