Microsoft Edge中window.getSelection()返回结果异常问题咨询

I’ve run into this exact quirk with Edge’s selection API before—super frustrating when Chrome behaves as expected! Let’s break down what’s going on and how to fix it:

Why This Happens #

Edge has a known inconsistency in how it calculates anchorOffset/focusOffset when a selection includes the very last character of a text node. Instead of returning the actual length of the selected content (like Chrome does), it incorrectly reports 1 for whichever offset corresponds to the selection’s end boundary. This only kicks in when your selection hits the final character of a node; selections that stop short work normally.

Workaround Solutions #

1. Manual Offset Calculation Using Selected Text Length #

Instead of trusting the raw offset values, use the actual length of the selected text to correct Edge’s faulty output. Here’s a reusable function:

function getAccurateSelectionOffset() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return null;

  const selectedText = selection.toString();
  const actualLength = selectedText.length;
  const range = selection.getRangeAt(0);
  const isAtTextNodeEnd = range.endOffset === range.endContainer.textContent.length;

  // Check if we're dealing with Edge's quirk
  if (navigator.userAgent.includes('Edge') && isAtTextNodeEnd) {
    return actualLength;
  }

  // Fall back to standard behavior for other cases/browsers
  return Math.min(selection.anchorOffset, selection.focusOffset);
}

2. Normalize the Selection Range #

You can adjust the selection range directly to fix Edge’s incorrect offset reporting:

function normalizeEdgeSelection() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const endNode = range.endContainer;

  // Detect Edge's faulty offset at text node end
  if (endNode.nodeType === Node.TEXT_NODE && range.endOffset === 1 && endNode.textContent.length > 1) {
    // Reset the range end to the actual text length
    range.setEnd(endNode, endNode.textContent.length);
    // Update the selection with the corrected range
    selection.removeAllRanges();
    selection.addRange(range);
  }

  // Return the corrected offset
  return Math.min(selection.anchorOffset, selection.focusOffset);
}

3. Feature Detection (Better Than User Agent Checks) #

Avoid relying on user agent strings by testing for the quirk on page load:

// Test for Edge's selection bug once on initialization
let hasEdgeSelectionQuirk = false;
(function testSelectionQuirk() {
  const testElement = document.createElement('p');
  testElement.textContent = 'Sample text to test selection offset';
  document.body.appendChild(testElement);

  // Select the entire text content
  const selection = window.getSelection();
  const testRange = document.createRange();
  testRange.selectNodeContents(testElement);
  selection.removeAllRanges();
  selection.addRange(testRange);

  // Check if offset is incorrectly reported as 1
  if (selection.anchorOffset === 1 && testElement.textContent.length > 1) {
    hasEdgeSelectionQuirk = true;
  }

  document.body.removeChild(testElement);
})();

// Use the test result in your selection logic
function getSelectionOffset() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return null;

  return hasEdgeSelectionQuirk ? selection.toString().length : Math.min(selection.anchorOffset, selection.focusOffset);
}

Quick Notes #

• Test these fixes across both legacy Edge and Chromium-based Edge to ensure consistency.
• For selections spanning multiple text nodes, you’ll need to extend the logic to sum lengths across all selected nodes.

内容的提问来源于stack exchange，提问作者Len White