将文本选择转换为高亮显示的元素

在我的应用程序中,我希望用户能够选择一堆文本并高亮显示,类似于word/libreoffice中的“marker”功能。

我用这个片段获得了一些有限的成功,但在选择更复杂(=块元素?)的内容时失败了:

let sel = document.getSelection()
let range = sel.getRangeAt(0)
let marker = document.createElement('span')
marker.className = 'highlight'
range.surroundContents(marker)
range.collapse()

那么-我如何从一个选择或范围得到一个修改过的HTML,其中的每个文本节点都被包装在一个高亮标记中?请注意,我不太在乎选择的结构是否需要重写,只要得到的布局保持不变。

以上工作示例可在此处找到: http://jsfiddle.net/7g5nb94w/