将HTML转换成定制的格式 可否提供一下思路

Question

一个富文本编辑器的需求 需要将原有的DOM结构进行转换 后传递给后端进行解析

以下是一个原本的dom

<div id="div1">
    <p style="margin-bottom: 10pt; white-space: normal; text-indent: 30pt; text-align: center;">
        <span style="font-family: 仿宋GB2312; font-size: 16pt;">
            9月30日,国
            <strong>家主席
                <span>习近</span>
              平同
            </strong>
            文
            <em>莱苏丹哈</em>
            桑纳尔
            <span style="font-family: 仿宋GB2312; font-size: 16pt; color: rgb(149, 55, 52);">互致贺电,</span>
        庆祝中文建交30周年。gfhfhfgh
    </span>
    </p>
</div>

需要转换的结果

<div id="div1">
    <p style="margin-bottom: 10pt; white-space: normal; text-indent: 30pt; text-align: center;">
        <span style="font-family: 仿宋GB2312; font-size: 16pt;"> 9月30日,国</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt; font-weight: bold;">家主席</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt; font-weight: bold;">习近</span> 
        <span style="font-family: 仿宋GB2312; font-size: 16pt; font-weight: bold;"> 平同</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt;">  文</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt; font-style: italic;"> 莱苏丹哈</span> 
        <span style="font-family: 仿宋GB2312; font-size: 16pt;">桑纳尔</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt; color: rgb(149, 55, 52);">互致贺电,</span>
        <span style="font-family: 仿宋GB2312; font-size: 16pt;">  庆祝中文建交30周年。gfhfhfgh</span></p>
</div>

1. 希望的结果是将所有的dom子节点 都遍历后以《span》包裹 不能是嵌套的 需要扁平化
2. 扁平化后的文本需要继承父类的style,如果是《strong》元素则需要添加一个新的style font-weight:bold,

希望可以提供一下思路

Answer 1

递归。childNodes，把所有节点都包装一下，然后 append。text 的话取父级样式，其他取自己样式。

.children
HTMLCollection(3) [strong, em, span]


.childNodes
NodeList(7) [text, strong, text, em, text, span, text]

Answer 2

整体结构的提取可以通过深度优先遍历，从childNodes中取子元素

    let divs = document.querySelector('#div1')

    function getDomString(elm, parentStyle) {
        //text节点
        if (elm.nodeName == '#text') {
            let text = elm.textContent.trim();
            if (text.length > 0) {
                return `<span style="${parentStyle}"> ${text}</span>`
            }

        } else {
            let curStyle = parentStyle;

            //获取当前元素的内联css, 
            curStyle += elm.style.cssText;

            //对<strong></strong>之类的做处理
            if (elm.nodeName == 'STRONG') {
                curStyle += ' font-weight: bold;'
            }

            let child = elm.childNodes;
            let domStr = '';
            for (let c of child) {
                //这个curStyle其实并不完全， 缺少#div1的所有上层元素的内联样式，也缺少一些全局的样式。 
                domStr += getDomString(c, curStyle)
            }


            if (elm.nodeName == 'P') {
               domStr = `<P style="${curStyle}">${domStr}</P>`
            }

            return domStr;
        }
        return '';
    }

    console.log(getDomString(divs, divs.style.cssText))

其实还有些缺陷，暂时不知道咋处理，比如div1的上级元素的样式，没有继承，比如css文件中定义的样式会丢失掉。