时间戳

首页 > 解决方案 > 将 HTML 结构拆分为一组标签

javascript - 将 HTML 结构拆分为一组标签

问题描述

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

标签： javascripthtmlarraysstring

解决方案

您可以使用 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>

推荐阅读