【Web前端问题】如何格式化富文本编辑器的代码内容？

Z时代
2024-01-10
分类：技术分享

问题描述

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

例如：输入以下内容
图片描述

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

文字1 文字2 文字3 文字4

<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: ''}
...]

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

回答：

用楼上思想实现的：

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);