如何将 html 变成结构化的数据模型

var util = {};
util.getRichTextByHtml = function (html) {

    var divEl= document.createElement('div');
    divEl.innerHTML = html;
    document.body.appendChild(divEl);

    var iterator = document.createNodeIterator(divEl, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
    var root = iterator.nextNode(); // root
    var richText = [];
    var style = {};
    var text = '';
    var node = iterator.nextNode();
    var underlineNode = null,
        lineThroughNode = null,
        pNode = null;
    while (node !== null) {
        if (node.nodeType === 3 ) {
            //是否为文字节点，例如 "这是一段文字"
            text = node.nodeValue;
            style = document.defaultView.getComputedStyle(node.parentElement, null); // 获取父容器的样式
            if (underlineNode && underlineNode.contains(node) === false) { // 上一个下划线 u 节点是否包含当前node
                underlineNode = null;
            }
            if (lineThroughNode && lineThroughNode.contains(node) === false) {// 上一个中划线strike 节点是否包含当前node
                lineThroughNode = null;
            }
            if (pNode && this._getLastTextNode(pNode) === node && this._getLastTextNode(root) !== node) {
                text = text + '\\r\\n';
                pNode = null;
            }
            var richTextStyle = this._getRichStyle(style, underlineNode, lineThroughNode);
            this._handleSuperAndSubScript(root, node, richTextStyle);
            richText.push({
                style: richTextStyle,
                text: text
            });
        } else if (node.nodeName.toLowerCase() === 'p') {
            pNode = node;
        } else if (node.nodeName.toLowerCase() === 'u') {
            underlineNode = node;
        } else if (node.nodeName.toLowerCase() === 'strike') {
            lineThroughNode = node;
        } else if (node.tagName.toLocaleLowerCase() === 'br') {
            pNode = node;
            richText.push({
                text: '\\r\\n'
            });
        }

        node = iterator.nextNode();
    }
    document.body.removeChild(divEl);
    // console.log(richText)
    return richText;
}

util._getLastTextNode = function (root) {
    if (root && root.nodeType === 1) {
        var child = root.lastChild;
        return this._getLastTextNode(child);
    } else {
        return root;
    }
};

util._getRichStyle = function (style, isUnderlineNode, isLineThroughNode) { // getComputedStyle can't get inherit textDecoration

    return {
        font: (style.fontWeight === '700' ? 'bold ' : '') + (style.fontStyle === 'italic' ? 'italic ' : '') + style.fontSize + ' ' + style.fontFamily,
        foreColor: style.color,
        textDecoration: ((isUnderlineNode || style.textDecoration.indexOf('underline') > -1) ? 1 : 0) | ((isLineThroughNode || style.textDecoration.indexOf('line-through') > -1) ? 2 : 0)
    };
};
util._handleSuperAndSubScript = function (root, node, style) {
    if (root === node) {
        return;
    }
    while (node.parentNode !== root) {
        if (node.nodeName.toLowerCase() === 'sub') {
            style.vertAlign = 2;
            break;
        }
        if (node.nodeName.toLowerCase() === 'sup') {
            style.vertAlign = 1;
            break;
        }
        node = node.parentNode;
    }
}
document.write(JSON.stringify(util.getRichTextByHtml('Helloworld'),'',4))

将

Helloworld

转化为

[
    {
        "style":{
            "font":"16px "PingFang SC"",
            "foreColor":"rgb(0, 0, 0)",
            "textDecoration":0
        },
        "text":"Hello"
    },
    {
        "style":{
            "font":"bold 16px "PingFang SC"",
            "foreColor":"rgb(0, 0, 0)",
            "textDecoration":0
        },
        "text":"world"
    }
]