Html – Create an array of objects separating what is text and what is markup

From an HTML code, I’ve to make an array of objects separating what is text and what is markup, like this way:

[
    {"text": "A "},
    {"markup": "<b>"},
    {"text": "test"},
    {"markup": "</b>"}
]

The HTML code that I’m using is this one:

<h2 id="mcetoc_1h1m1ll27l">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tincidunt lectus.<a href="https://www.sadasdas.es" aria-invalid="true">tr</a><a title="titulo" href="https://www.sadasdas.es" aria-invalid="true">adsf afjdasi k</a><a title="titlee" href="https://www.sadasdas.es" aria-invalid="true">asdsssssssssssss</a><a href="https://www.sadasdas.es" aria-invalid="true">s</a></p>
<p><a href="https://www.sadasdas.es" aria-invalid="true">Lorem Ipsum</a></p>

To avoid the using of RegEx, first I create an array with all the nodes and then I loop over the nodes, looking what is an Element and what is a text node.

Currently I’m stuck with closing tags when an element node has child text nodes followed element nodes (and I’m not sure if I’m overcomplicating things):

<p>Lorem ipsum dolor sit...<a href="..." aria-invalid="true">tr</a><a title="..." href="..." aria-invalid="true">...</a><a title="..." href="..." aria-invalid="true">...</a><a href="..." aria-invalid="true">...</a></p>

So from this paragraph, my object looks so:

{markup: '<p>'}
{text: 'Lorem ipsum dolor sit...'}
{markup: '</p>'}
{markup: '<a>'}
//...

As you can see the close tag appears after the text node. I’ve managed it for element nodes followed by other element nodes, but this case still escapes me.

This is what I’ve done so far (codepen):

const obj = {
    annotation: []
};

const nodelist = (() => {
    const res = [];
    const tw = document.createTreeWalker(document.body);

    while (tw.nextNode()) {
        res.push(tw.currentNode)
    }

    return res;
})();

console.log(nodelist);

const nodeHasParents = (node) => node.parentNode.nodeName !== 'BODY';
const isTextNode = (node) => node.nodeType === Node.TEXT_NODE;
const isElementNode = (node) => node.nodeType === Node.ELEMENT_NODE;

const GetNextNodeElements = (i) => {
    let n = i + 1;
    let res = [];

    while (nodelist[n] && isElementNode(nodelist[n])) {
        res.push(nodelist[n]);
        n++;
    }

    return res;
}

const GetNextTextNode = (i) => {
    let n = i + 1;

    for (let n = i; n < nodelist.length; n++) {
        if (isTextNode(nodelist[n])) return nodelist[n];
    }
}


for (let i = 0; i < nodelist.length; i++) {
    let node = nodelist[i];
    let opentags = '';
    let closetags = '';

    if (isTextNode(node) && !nodeHasParents(node)) {
        obj.annotation.push({"text": node.textContent});
    }
    else if (isElementNode(node)) {
        opentags += `<${node.nodeName.toLowerCase()}>`;

        const currentNode = node;
        const nextNodeElements = GetNextNodeElements(i);

        if (nextNodeElements) {
            nextNodeElements.forEach(node => opentags += node.outerHTML.replace(node.textContent, '').replace(`</${node.nodeName.toLowerCase()}>`, ''));
            nextNodeElements.reverse();
            nextNodeElements.forEach(node => closetags += `</${node.nodeName.toLowerCase()}>`);

            i = i + nextNodeElements.length;
            node = nodelist[i];
        }

        if (!!closetags.length) {
            closetags = `</${currentNode.nodeName.toLowerCase()}>` + closetags;
        }
        else closetags += `</${currentNode.nodeName.toLowerCase()}>`

        obj.annotation.push({"markup": opentags});
        obj.annotation.push({"text": GetNextTextNode(i)?.textContent});
        obj.annotation.push({"markup": closetags});
    }
}

console.log(obj.annotation);