How do I format the code content of a rich text editor?

problem description

in the project, you need to use a rich text editor to edit the text and pass it to the back end.
the front end uses

1 234

1 
<span style="color: -sharpE36C09;">2</span>
<span style="font-size: 20px;">3
<span style="font-size: 30px; color: -sharp974806;">4</span>
</span>

but the data needed at the back end is in this format (currently only text, color and font size are needed)

[
{text: "1", color: "", font_size: ""},
{text: "2", color: "-sharpE36C09", font_size: ""}
...
]

is there any elegant way to format this data? At present, the only thing I can think of is regular matching, and the key is that personal regularities are relatively bad, and I can"t write them out.

Regular-expression html javascript

Mar.28,2021

it may be more complicated to use regularity. Add this html directly to a dom node, obtain attributes through the dom node generated by variables, and convert it into a json object

realized with the idea of upstairs:

4</span>
</span>
`;
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);

Previous: How css makes div highly adaptive

Next: PropTypes is also verified in test.js. How to cancel.