鍍金池/ 問答/Java  HTML/ 如何格式化富文本編輯器的代碼內容？

如何格式化富文本編輯器的代碼內容？

問題描述

在項目中需要用到富文本編輯器編輯文本編輯文本，并且傳給后端。
前端使用的是 百度編輯器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: ''}
...
]

請問大家有什么優(yōu)雅的方式來格式化這些數據嗎？ 目前唯一想到的就是正則匹配，關鍵是個人正則比較菜，也寫不出來。

回答
編輯回答
祈歡

用樓上思想實現的：

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; // 父節(jié)點樣式
                    data.push({
                        text: text.trim(),
                        color: style.color,
                        font_size: style.fontSize,
                    });
                }
            }
        });
    }
}
let data = [];
getData(div, data);
console.log(data);
2017年12月18日 00:17
編輯回答
初心

用正則可能就比較復雜了，把這段html直接添加到一個dom節(jié)點上，通過變量生成的dom節(jié)點，獲取屬性，轉換成json對象

2017年5月15日 01:56