Flatten HTML

When creaing rich content editor, working on array is easier than working on trees like the DOM. This page presents a JavaScript function that convert the DOM into an array of object. Each object is a leaf of the DOM (leaf of the tree).

The function takes a node element (the root node) as input and produces an array composed of objects:

index is the index (number of characters) of the leaf from the root node
length is the number of characters in the leaf
parents is an array containing all the ordered parent nodes between the leaf and the root

To prevent weird behaviors with the carriage returns, I use the CSS style white-space: pre-wrap; on the root node.

Here is the result (look at the array in the console):

Here is the full JavaScript function:

// Convert nested HTML info flatten array
function flattenHtml (node, flat=[], tagsList = [])
{
    // Add the current tag
    tagsList.push(node)

    // Check if it is a leaf or not
    if (!node.childNodes.length)
    {
        // Calculate the node index
        let index = (flat[flat.length -1] === undefined) ? 0 : flat[flat.length -1].index + flat[flat.length -1].length;
        // Push the node in the array
        flat.push( { index: index, length: node.length ?? 1, text: node.wholeText ?? '', parents: [...tagsList] });
    }
    else
    {
        // Call the function recursively on each child
        node.childNodes.forEach((child) => { flat = flattenHtml(child, flat, tagsList); })
    }
    // Remove the current tag
    tagsList.splice(tagsList.indexOf(node),1); 
    return flat;
}

The result should look like:

Flatten HTML

See also