Aplatir du HTML en tableau JS

Lorsque l'on crée un éditeur enrichi, travailler avec des tableaux est plus simple que de travailler directement avec l'arbre HTML. Cette page présente une fonction JavaScript qui permet de transformer (aplatir/flaten) des éléments du DOM en un tableau d'objets. Chaque objet est une feuille du DOM (de l'arbre HTML).

La fonction reçoit un noeud de l'arbre en entrée qui sera le noeud racine de la fonction (root). La fonction retourne un tableau d'objets qui sont chacun composés de :

index est l'index (le nombre de caractères) de la feuille entre la racine et la feuille courante.
length est le nombre de caractères de la feuille
parents est un tableau ordonné contenant tous les noeuds parents de la feuille jusqu'au noeud racine

Pour éviter des comportements bizarres avec les retours chariots, j'ai utilisé le style CSS white-space: pre-wrap; sur l'élément racine.

Voici le résultat (regardez le tableau dans la console) :

Voici la fonction JavaScript complète :

// 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;
}

Et enfin, voici un exemple de tableau retourné par la fonction :

Voir aussi

Dernière mise à jour : 06/04/2020