Selection API containsNode方法与可见选区表现不一致问题排查

问题描述 #

Selection.containsNode()方法接受可选的第二个参数partialContainment：

• 设为true时功能基本正常，但有时会选中不属于可见选区的相邻元素；
• 设为false严格匹配时，又会遗漏部分元素。

页面可见高亮选区与API对「选中内容」的判定是否存在差异？

在下方示例中，选中部分文本后，部分可见高亮的字母并未变为红色活跃状态，需如何修改才能让所有可见选中的文本变为红色？

初始代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }
#container { display: flex; flex-direction: row; gap: 0.25rem; align-items: center; justify-content: center; }
.sequence { display: flex; flex-direction: row; }
.sequence:after { content: ','; }
.sequence:last-child:after { content: none; }
.letter-active { color: red; }

const sequences = ['CRABAPPLE', 'ORANGES', 'SQUASH'];

const handleTextSelection = (e) => {
  const selection = window.getSelection();
  const $container = $(e.currentTarget);
  const $sequence = $(e.target).closest('.sequence');
  $sequence.find('.letter').each((i, el) => {
    $(el).toggleClass('letter-active', selection.containsNode(el, false));
  });
  selection.empty();
};

$('#container').append(sequences.map(sequence =>
  $('<div>', { class: 'sequence' }).append(sequence.split('').map(letter =>
    $('<div>', { class: 'letter', text: letter })))));
    
$('#container').on('mouseup', handleTextSelection);

更新内容 #

以下代码的表现有所改善，但仍会将部分未实际选中的字母判定为已选中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }
#container { display: flex; flex-direction: row; gap: 0.25rem; align-items: center; justify-content: center; }
.sequence { display: flex; flex-direction: row; }
.sequence:after { content: ','; }
.sequence:last-child:after { content: none; }
.letter-active { color: red; }

const sequences = ['CRABAPPLE', 'ORANGES', 'SQUASH'];

const getLetter = (node) => {
  let letter = node;
  if (node.nodeName === '#text') { node = node.parentElement; }
  return node.classList.contains('letter') ? node : null;
};

const handleTextSelection = (e) => {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const { startContainer, endContainer } = range
  const $container = $(e.currentTarget);
  const $sequence = $(range.commonAncestorContainer);
  const letterStart = getLetter(startContainer);
  const letterEnd = getLetter(endContainer);
  if (!letterStart || !letterEnd) { return; }
  let active = false;
  $sequence.find('.letter').each((i, el) => {
    if (el === letterStart) { active = true; }
    $(el).toggleClass('letter-active', active);
    if (el === letterEnd) { active = false; }
  });
  selection.empty();
};

$('#container').append(sequences.map(sequence =>
  $('<div>', { class: 'sequence' }).append(sequence.split('').map(letter =>
    $('<div>', { class: 'letter', text: letter })))));
    
$('#container').on('mouseup', handleTextSelection);

解决方案 #

问题核心是containsNode的判定逻辑未考虑选区的边界偏移，更新后的代码也没处理“选中字母一部分”的场景。正确做法是通过Range的边界对比，精准判断每个字母是否与选区重叠：

修正后的代码 #

const sequences = ['CRABAPPLE', 'ORANGES', 'SQUASH'];

const handleTextSelection = (e) => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  // 重置所有字母的激活状态
  $('.letter').removeClass('letter-active');

  $('.letter').each((_, letterEl) => {
    const textNode = letterEl.firstChild;
    if (!textNode) return;
    
    // 创建当前字母的范围对象
    const letterRange = document.createRange();
    letterRange.selectNodeContents(textNode);
    
    // 判断字母范围是否与选区有重叠
    const isOverlapStart = range.compareBoundaryPoints(Range.END_TO_START, letterRange) < 0;
    const isOverlapEnd = range.compareBoundaryPoints(Range.START_TO_END, letterRange) > 0;
    
    if (isOverlapStart && isOverlapEnd) {
      $(letterEl).addClass('letter-active');
    }
  });
  
  selection.empty();
};

$('#container').append(sequences.map(sequence =>
  $('<div>', { class: 'sequence' }).append(sequence.split('').map(letter =>
    $('<div>', { class: 'letter', text: letter })))));
    
$('#container').on('mouseup', handleTextSelection);

逻辑说明 #

1. 每次选中后先重置所有字母的激活状态，避免残留；
2. 遍历每个字母元素，获取其内部文本节点并创建对应Range；
3. 使用Range.compareBoundaryPoints对比选区与字母的边界：
   • END_TO_START判断选区结束位置是否在字母起始位置之后；
   • START_TO_END判断选区起始位置是否在字母结束位置之前；
4. 两个条件同时满足时，说明字母与选区有重叠，添加激活类。

该逻辑能精准匹配所有可见选中的文本，不会出现遗漏或误判的情况。

内容的提问来源于stack exchange，提问作者Mr. Polywhirl