如何格式化富文本编辑器的代码内容？

Question

问题描述

在项目中需要用到富文本编辑器编辑文本编辑文本，并且传给后端。
前端使用的是 百度编辑器ueditor

例如： 输入以下内容

前端富文本得到的数据格式为

<p>文字1 <span style="color: #E36C09;">文字2</span>&nbsp;<span style="font-size: 20px;">文字3&nbsp;<span style="font-size: 30px; color: #974806;">文字4</span></span></p>

<p>文字1 
<span style="color: #E36C09;">文字2</span>&nbsp;
<span style="font-size: 20px;">文字3&nbsp;
<span style="font-size: 30px; color: #974806;">文字4</span>
</span>
</p>

但是后端需要的数据是这种格式（目前只需要文字，颜色和字体大小）

[
{text: '文字1', color: '', font_size: ''},
{text: '文字2', color: '#E36C09', font_size: ''}
...
]

请问大家有什么优雅的方式来格式化这些数据吗？ 目前唯一想到的就是正则匹配，关键是个人正则比较菜，也写不出来。

Answer 1

用楼上思想实现的：

const html = `
<p>文字1 
<span style="color: #E36C09;">文字2</span>&nbsp;
<span style="font-size: 20px;">文字3&nbsp;
<span style="font-size: 30px; color: #974806;">文字4</span>
</span>
</p>`;
let div = document.createElement('div');
div.innerHTML = html;
function getData(node, data) {
    if (!Array.isArray(data)) {
        throw TypeError('data is not Array');
    }
    if (node.hasChildNodes()) {
        node.childNodes.forEach(element => {
            if (element.nodeType === 1) { // 元素结点
                getData(element, data); // 递归
            }
            if (element.nodeType === 3) { // 文本结点
                const text = element.nodeValue;
                if (!text.match(/^\s*$/g)) { // 非空白字符
                    const style = element.parentNode.style; // 父节点样式
                    data.push({
                        text: text.trim(),
                        color: style.color,
                        font_size: style.fontSize,
                    });
                }
            }
        });
    }
}
let data = [];
getData(div, data);
console.log(data);

Answer 2

用正则可能就比较复杂了，把这段html直接添加到一个dom节点上，通过变量生成的dom节点，获取属性，转换成json对象