Javascript 将html内容分解为单独的更高级别的html标记，并将它们存储在数组中

我正试图找出如何实现以下目标

假设我有一个像这样的字符串

"<h1>My heading</h1> <p><ul><li>Some item</li></ul> Some paragraph text</p> <p>Another paragraph text in <b>bold</b></p>"

“我的标题
某些项目
某些段落文本
另一段粗体文本
”

我需要用更高级别的标记拆分此字符串，并将其放入数组中，例如：

[
  "<h1>My heading</h1>",
  "<p><ul><li>Some item</li></ul> Some paragraph text</p>",
  "<p>Another paragraph text in <b>bold</b></p>"
]

[
“我的标题”，
“
某些项目
某些段落文本
”，
“另一段粗体文本”
]

---

请注意嵌套标记是如何不分离的。此外，我不知道哪些标记可以位于更高的级别，因此在本例中，除了

h1

和

p

之外，还可以使用其他任何标记。

您可以将字符串转换为DOM元素，循环和拆分，然后重新转换为字符串（但不确定这是否是最好的方法）：

var str=“我的标题
某些项目
某些段落文本另一段粗体文本”；
var-arr=[]；
var dom=document.createElement（'div'）；
//转换字符串
dom.innerHTML=str；
//循环遍历dom结构，并仅将直接子级推入数组
for（dom.childNodes中的var键）{
if（dom.childNodes[key].nodeType！==3&&dom.childNodes[key].parentElement==dom）{
arr.push（dom.childNodes[key]）；
}
}
//遍历数组并将dom元素重新转换为字符串
arr=arr.map（函数（el）{
var wrap=document.createElement（'div'）；
包裹。附属物（el）；
返回wrap.innerHTML；
});
控制台日志（arr）；

---

注意：您的示例不起作用，因为您不能在html中的p元素中包含ul元素。

您可以这样做以避免使用jQuery或DOM元素

htmlToPhrases('hello <p>my name is <span>Roman</span></p><span>!</span>');

htmlToPhrases（'hello我的名字是Roman
！'）；

它会回来的

[
    "hello ",
    "<p>my name is <span>Roman</span></p>",
    "<span>!</span>"
]

[
“你好”，
“我的名字是罗曼”
“，
"!"
]

代码

function htmlToPhrases(text) {
    let acc = [];
    while (text) {
        if (text[0] !== '<') {
            const nextOpenTag = text.indexOf('<');
            if (nextOpenTag === -1) {
                acc.push(text);
            } else {
                acc.push(text.substr(0, nextOpenTag));
            }
        } else {
            acc.push(_getFirstTag(text));
        }
        text = text.substr(acc[acc.length - 1].length);
    }
    return acc;
}

function _getFirstTag(text, acc = '', level = 0) {
    const afterOpenChar = text.indexOf('<') + 1;
    const nextTag = text[afterOpenChar];

    level += nextTag === '/' ? -1 : 1;

    acc += text.substr(0, afterOpenChar);
    text = text.substr(afterOpenChar);

    if (level === 0) return acc + text.substr(0, text.indexOf('>') + 1);

    return _getFirstTag(text, acc, level);
}

function语句（文本）{
设acc=[]；
while（文本）{
如果（文本[0]！==”定义“更高级别的优先级”。您的筛选/排序条件需要更好地定义。需要这样做的更高级别用例是什么？请说明您已经尝试了什么。现在这个问题太复杂了broad@charlietfl我试图在我的示例中说明，任何未嵌套在另一个html元素中的html元素都是更高级别的元素，即问题中的h1和p标记。到目前为止，我只是尝试了正则表达式，但它们只能识别它是否是一个标记，而不能识别它是否是更高级别的标记。将它放入另一个元素中，并循环到子元素上，如果这是您所需要的，ul示例实际上是一个问题，因为我的所见即所得如何返回它
function htmlToPhrases(text) {
    let acc = [];
    while (text) {
        if (text[0] !== '<') {
            const nextOpenTag = text.indexOf('<');
            if (nextOpenTag === -1) {
                acc.push(text);
            } else {
                acc.push(text.substr(0, nextOpenTag));
            }
        } else {
            acc.push(_getFirstTag(text));
        }
        text = text.substr(acc[acc.length - 1].length);
    }
    return acc;
}

function _getFirstTag(text, acc = '', level = 0) {
    const afterOpenChar = text.indexOf('<') + 1;
    const nextTag = text[afterOpenChar];

    level += nextTag === '/' ? -1 : 1;

    acc += text.substr(0, afterOpenChar);
    text = text.substr(afterOpenChar);

    if (level === 0) return acc + text.substr(0, text.indexOf('>') + 1);

    return _getFirstTag(text, acc, level);
}