跟踪更改类实现的HTML差异

我正在尝试实现一个类似谷歌文档的版本历史记录，它可以跟踪文档的更改。我的输入是HTML代码，包括更改前后。我读过和的文章，但意识到它们非常适合识别源代码之间的差异，即HTML标记只是简单地读作纯文本

以下是一个例子：

//Before
<ol>
    <li><strong>This is first bullet point</strong>
        <ol style="list-style-type: lower-alpha;">
            <li>First bullet - sub a</li>
            <li>First bullet - sub b</li>
        </ol>
    </li>

    <li><strong>This is second bullet point</strong>
        <ol style="list-style-type: lower-alpha;">
            <li>Second bullet - sub a
                <ol style="list-style-type: lower-roman;">
                    <li>Point 1</li>
                    <li>Point 2</li>
                </ol>
            </li>
            <li>Second bullet - sub b</li>
            <li>Second bullet - sub c</li>
        </ol>
    </li>
</ol>

//After
<ol>
    <li><strong>This is first bullet point</strong>
        <ol style="list-style-type: lower-alpha;">
            <li>First bullet - sub a with extended content</li>
            <li>Edited bullet - sub b</li>
        </ol>
    </li>

    <li><strong>This is second bullet point</strong>
        <ol style="list-style-type: lower-alpha;">
            <li><u>Second bullet - sub a</u>
                <ol style="list-style-type: lower-roman;">
                    <li>Point 1</li>
                    <li>Point 2</li>
                    <li>Point 3</li>
                </ol>
            </li>
            <li>Second bullet - sub b</li>
            <li>Newly inserted bullet</li>
            <li>Second bullet - sub c</li>
        </ol>
    </li>
</ol>

//之前
这是第一个要点
第一颗子弹-潜艇a
第一个项目符号-sub b

这是第二个要点
第二颗子弹-子弹a
第1点

第2点

第二个项目符号-sub b
第二个项目符号-sub c

//之后
这是第一个要点
第一个项目符号-具有扩展内容的sub a
编辑项目符号-子b

这是第二个要点
第二颗子弹-子弹a
第1点

第2点
第3点

第二个项目符号-sub b
新插入的子弹
第二个项目符号-sub c

我尝试了，但似乎都是以纯文本的形式读取HTML标记。换句话说，像

和

/u>