我可以使用什么算法在所见即所得编辑器中“规范化”对象数组？

Question

可能这将是最难解释的问题，但我会尝试。

我正在使用私人所见即所得编辑器（有点），我无法使用库，所以我必须重新发明轮子。 不要以此来评判我（我知道，对吧？）。 这个问题虽然很有趣。

我将数据存储在 JS 数组中，由于一些操作，它最终看起来像这样：

// Maybe not the most descriptive example and I feel like
// I can miss some specific case which can't be solved easily
// But this should be a good starting point
const input = [
    {
        data: 'Bold ',
        style: ['bold']
    },
    {
        data: 'text. ',
        style: ['bold']
    },
    {
        data: 'A couple if italic lines. ',
        style: ['italic'],
    },
    {
        data: 'Italic and underlined text. ',
        style: ['italic', 'underline']
    },
    {
        // Some lines might me nested already
        data: [
            {
                data: 'Italic, underlined and with background. '
            },
            {
                data: 'Also bold line here. ',
                style: ['bold']
            }
        ],
        style: ['italic', 'underline', 'background-red']
    },
    {
        data: 'Just italic again.',
        style: ['italic']
    }
]

这将呈现如下 HTML：

 <!-- Linebreaks for readability but this should be a single line --> <p> <b>Bold </b><b>text. </b> <i>A couple of italic lines. </i> <i><u>Italic and underlined text. </u></i> <i class="background-red"> Italic, underlined and with background. <b>Also bold line here. </b> </i> <i>Just italic again.</i> </p>

即使在示例中也不是很好，但在现实生活中情况可能会变得更糟。 如果它在内部某个地方使用也许并不重要，但是当涉及到 SEO 时——这肯定会很糟糕。

因此，在应用样式后，我需要像这样“标准化”（我找不到更好的术语）数组：

const result = [
    {
        data: 'Bold text. ',
        style: ['bold']
    },
    {
        data: [
            {
                data: 'A couple of italic lines. ',
            },
            {
                data: [
                    {
                        data: 'Italic and underlined text. '
                    },
                    {
                        data: [
                            {
                                data:  'Italic, underlined and with background. '
                            },
                            {
                                data: 'Also bold line here. ',
                                style: ['bold']
                            }
                        ],
                        style: ['background-red']
                    }
                ],
                style: ['underline']
            },
            {
                data: 'Just italic again.'
            }
        ],
        style: ['italic']
    }
]

这将为我们带来这个漂亮且对 SEO 友好的标记：

 <p> <b>Bold text. </b> <i> A couple of italic lines. <u> Italic and underlined text. <span class="background-red"> Italic, underlined and with background. <b>Also bold line here. </b> </span> </u> Just italic again. </i> </p>

我相信这是一个非常常见的编码问题，应该已经解决了一千次，但我只是不知道如何命名这种模式以尝试找到解决方案。 我也在研究开源的 WISIWYG，但还没有运气。