Javascript 当范围选择扩展到父元素时，如果选择的任一个位于标签的中间，则创建额外的元素。

代码：
版本显示：所选html为文本（展开）：

所以，当我做这样的选择时：

我的代码生成如下“突出显示”：

注意它是如何在选择之前和之后添加一个空的

它应该做的是用选择范围完全包围6,7,8池

以下是代码处理选择扩展：

TBR.Selection.get_HTML_from_range = function(range, sel){
var startEl = sel.anchorNode;
var endEl = sel.focusNode;

if (startEl != endEl){
        if (startEl != range.commonAncestorContainer) {
        while (startEl.parentNode != range.commonAncestorContainer) {
            startEl = startEl.parentNode;
        }
    }
    if (endEl != range.commonAncestorContainer) {
        while (endEl.parentNode != range.commonAncestorContainer) {
            endEl = endEl.parentNode;
        }
    }
        range.setStartBefore(startEl);
        range.setEndAfter(endEl);
    }
sel.addRange(range);

var container = document.createElement("span");
container.appendChild(sel.getRangeAt(0).cloneContents());

html = container.innerHTML;

    if (html.length < MINIMUM_SELECTION_LENGTH) {return false;}
    return html;
}

TBR.Selection.get\u HTML\u from\u range=函数（range，sel）{
var startEl=sel.anchorNode；
var endEl=选择聚焦节点；
如果（startEl！=endEl）{
if（startEl！=range.commonAncestorContainer）{
while（startEl.parentNode！=range.commonAncestorContainer）{
startEl=startEl.parentNode；
}
}
if（endEl！=range.commonAncestorContainer）{
while（endEl.parentNode！=range.commonAncestorContainer）{
endEl=endEl.parentNode；
}
}
范围。设置开始之前（startEl）；
range.setEndAfter（endEl）；
}
选择添加范围（范围）；
var container=document.createElement（“span”）；
container.appendChild（sel.getRangeAt（0.cloneContents（））；
html=container.innerHTML；
if（html.length<最小选择长度）{return false；}
返回html；
}

基本上，如果选择的开始和结束在不同的DOM节点上，则选择需要展开，以便选择不包含损坏的DOM元素（所有标记都有匹配的结束标记，等等）

---

但我有一种感觉，选择正在破坏HTML，浏览器正在修复HTML，然后选择才会一直扩展。我不确定。

将

包装在一些

元素周围不是有点不合适吗？是的。我的意思是，但是其他块样式元素仍然存在问题。如果有一种方法可以轻松地、被动地扩展到整个UL/OL，那就太棒了。