Chrome三击选中文本时Range包含后续相邻节点的异常问题

现象差异 #

• 拖拽选择文本时，Range的startContainer与endContainer均指向实际高亮选中的文本内容，符合预期
• Chrome浏览器中三击选中节点文本时，Range的endContainer会指向被选中节点的下一个相邻节点，和页面实际高亮的文本范围不匹配
• 预期行为：三击选中生成的Range应当仅包含实际被选中的文本节点

复现代码 #

JS逻辑 #

document.addEventListener('click', e=>{
    var r = document.getSelection().getRangeAt(0);
  var start = r.startContainer.nodeType===3?r.startContainer:r.startContainer.childNodes[r.startOffset];
  var end = r.endContainer.nodeType===3?r.endContainer:r.endContainer.childNodes[r.endOffset];
  console.log(e.detail, start, end);
})

HTML结构 #

<p>
Triple click the h2 and you'll see the following p tag content in the console. 
</p>
<p>
Drag select the h2 tag, and the p tag content will not be present in the console.
</p>

<div>

  <h2>I'm a h2</h2> 
  <p>Why do you see me in the console?</p>
  
</div>

三击选中H2元素时的原始Range结构如下：

原因 #

这是Chromium内核的默认选区实现逻辑：三击选中块级元素整段内容时，选区结束边界会默认落在块级元素外侧、下一个相邻节点的起始位置，用于包含块级元素末尾的隐含换行，因此会出现endContainer指向相邻节点的情况，但视觉渲染时不会高亮下一个节点的内容。

修复方法 #

获取Range后对结束边界做归一化校正，当endContainer不是文本节点时，将结束位置回退到上一个子节点的末尾，即可让Range范围和视觉选中范围完全一致，校正后的代码：

document.addEventListener('click', e=>{
    const selection = document.getSelection();
    if (!selection.rangeCount) return;
    const range = selection.getRangeAt(0);
    // 克隆原始Range避免修改原生选区
    const fixedRange = range.cloneRange();

    // 校正结束边界
    if (fixedRange.endContainer.nodeType !== Node.TEXT_NODE && fixedRange.endOffset > 0) {
        const lastSelectedNode = fixedRange.endContainer.childNodes[fixedRange.endOffset - 1];
        fixedRange.setEndAfter(lastSelectedNode);
    }

    const start = fixedRange.startContainer.nodeType === Node.TEXT_NODE 
        ? fixedRange.startContainer 
        : fixedRange.startContainer.childNodes[fixedRange.startOffset];
    const end = fixedRange.endContainer.nodeType === Node.TEXT_NODE 
        ? fixedRange.endContainer 
        : fixedRange.endContainer.childNodes[fixedRange.endOffset - 1];
    
    console.log(e.detail, start, end);
})

校正后无论是拖拽选择还是三击选择，获取到的起止节点都和实际高亮的文本范围完全匹配，不会再出现指向下一个相邻节点的问题。

内容的提问来源于stack exchange，提问作者Andrew Graham-Yooll