Question

我正在尝试将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>',
]

Answer 1

你可以使用jquery和递归函数，但你必须转义符号＆＃34;因为它会影响\＆＃34;。

结果在控制台中：

＆＃13;

<!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>

＆＃13;

将HTML结构拆分为标记数组

1 个答案: