FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

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 :

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 :

Les élements HTML/DOM aplatis dans un tableau

Voir aussi


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