HTML高亮显示代码删除range（）的父标记。

Question

我有以下代码来突出显示html文档：

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents();
div = document.createElement("span");
div.className = "highlight"
div.appendChild(selectionContents);
range.insertNode(div);

ex:

<p>hello this is what i want highlighted</p>
 
becomes

<p></p> //I dont want this
<span class="highlight">hello this is what i want highlighted</span>

此代码对于嵌套html标签似乎很好用，但对于单个html标签，则将标签的内容提取出来并插入到突出显示的span元素中，旧的html标签只是在span之外徘徊。有没有办法将跨度添加到p元素的外部，或者在选择时完全摆脱p标签？

最好没有JQuery，这是一个有角度的项目