Javascript 将HTML结构拆分为标记数组
我正试图将一个HTML文件拆分成一个标记数组，目标是我将根据标记预先编写并附加ANSI转义码来给每一行上色，然后将其发送到控制台，并对其进行颜色编码 到目前为止，我能够用regex一个接一个地提取每个标记（显然是个坏主意），然后我的想法是定位该标记的索引，并预加/附加转义码，但我遇到的问题是多个看起来相同的标记，就像相邻的两个div 循环标记的代码Javascript 将HTML结构拆分为标记数组,javascript,html,arrays,string,Javascript,Html,Arrays,String,我正试图将一个HTML文件拆分成一个标记数组，目标是我将根据标记预先编写并附加ANSI转义码来给每一行上色，然后将其发送到控制台，并对其进行颜色编码 到目前为止，我能够用regex一个接一个地提取每个标记（显然是个坏主意），然后我的想法是定位该标记的索引，并预加/附加转义码，但我遇到的问题是多个看起来相同的标记，就像相邻的两个div 循环标记的代码 var htmlTagRe = /<\/?[\w\s="/.':;#-\/]+>/gi; const innerHTMLarr = te
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
});
var htmlTagRe=/您可以使用jquery和递归函数，但必须转义符号“因为它是\”
结果显示在控制台中：
堆栈溢出
texteee
段落
段落
另一个
测试
$（文档）.ready（函数（）{
var结果=[''，]；
var lenght=$（“正文”）[0]。children.length；
对于（var i=0；i<$（“body”）[0]。childrence.length-1；i++）{
var ele=$（“body”）[0]。子对象[i]；
if（ele.children.length 0）
param=ele.attributes[0]。节点名称+'=“'+ele.attributes[0]。节点值+''”；
控制台日志（param）；
结果：推送（“”）+
ele.innerHTML+
'');
}否则{
结果：推送（“”）；
递归（ele）；
结果：推送（“”）；
}
}
函数递归（ele）{
for（变量i=0；i
可能与@MatthewCliatt重复我已经看到了该线程，但它没有回答我的问题。我已经知道使用正则表达式是不好的。如果你看过这篇文章，那么你应该知道使用正则表达式解析HTML是非常糟糕的，你不应该在这里发布关于它的问题。这就是帖子保持原样的原因。请注意，
标记不需要或使用结束斜杠，而且从来没有。@eveo
poo
正如所说的Regexp无法解析html，这与你制作Regexp的时间和复杂程度无关，它是关于正式语法的。[X]html
。“HTML不是常规语言，因此无法通过正则表达式进行分析。”
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>',
]