如何修剪contenteditable元素的格式化HTML内容？

我遇到了这样一个问题：我有一个简单的contenteditable表格单元格，内容看起来是这样的：

当我点击Test按钮时，会输出这个单元格的innerHTML和innerText值到控制台。

innerHTML（注意末尾的4个<br>标签） #

<i style="font-size: 14.6667px;">This</i><span style="font-size: 14.6667px;">&nbsp;is one line</span><br style="font-size: 14.6667px;"><br style="font-size: 14.6667px;"><span style="font-size: 14.6667px;">This is&nbsp;</span><u style="font-size: 14.6667px; font-weight: bold;">another</u><span style="font-size: 14.6667px;">&nbsp;</span><span style="font-size: 14.6667px;">line</span><br style="font-size: 14.6667px;"><br><br><br style="font-size: 14.6667px;">

innerText #

This is one line

This is another line

我想要实现的是修剪这个innerHTML的值（也就是移除多余的空白行），同时完全保留原有文本的格式。如果用innerText处理的话很简单，比如document.getElementById("id").innerText.trim()就能去掉首尾空白，但这样会把所有的格式（比如斜体、下划线、字体样式）都弄丢了。我找不到直接“修剪”带格式HTML内容的方法，有没有用JavaScript或者jQuery实现这个需求的办法？

相关代码示例 #

JavaScript

function test() {
    var html = document.getElementById("inputBox").innerHTML;
    var text = document.getElementById("inputBox").innerText;
    console.log(`html:\n${html}`);
    console.log(`text:\n${text}`);
}

CSS

table {
  width: 100%;
}

td#inputBox {
  height: 100px;
  border: 1px solid #020202;
}

HTML

<table>
    <tr>
        <td contenteditable="true" id="inputBox"></td>
    </tr>
</table>
<button onclick="test()">Test</button>

备注：内容来源于stack exchange，提问作者ajthealchemist