Chrome中window.getSelection()异常：无文本选中仍返回Range

我在开发简易富文本编辑器时，使用window.getSelection()判断文本选中状态，按照MDN文档的条件（rangeCount>0、type="Range"、isCollapsed=false）判断是否有文本选中，这个逻辑在多数浏览器正常，但Chrome里即使未选任何文本，selection对象仍会返回一个Range，导致判断失效。

问题原因 #

Chrome中，当光标处于contenteditable区域时，selection会存在一个折叠的Range（isCollapsed=true），此时selection.type在Chrome中为"Caret"而非"Range"，但原逻辑中同时判断type="Range"和isCollapsed=false，无法适配Chrome的表现。实际上，isCollapsed是更可靠的判断依据——只要isCollapsed为true，就代表没有选中任何文本，仅存在光标位置。

解决方案 #

调整判断逻辑，优先通过isCollapsed判断是否有选中内容，去掉对selection.type的依赖（不同浏览器对该属性的定义存在差异），核心判断条件简化为：selection.rangeCount>0且!selection.isCollapsed。

修正后的JavaScript代码 #

(() => {
  const button = document.getElementById("click");
  
  button.addEventListener("click", (event) => {
    event.preventDefault();
    event.stopPropagation();

    const selection = window.getSelection();
    let range = null;

    // 核心判断：存在Range且未折叠（即有选中内容）
    if (selection.rangeCount > 0 && !selection.isCollapsed) {
      if (selection.rangeCount > 1) {
        range = [];
        for (let index = 0; index < selection.rangeCount; index++) {
          range.push(selection.getRangeAt(index));
        }
      } else {
        range = selection.getRangeAt(0);
      }
    }

    console.log(range);
  });
})();

代码修改说明 #

1. 移除冗余的rangeCount变量赋值，直接使用selection.rangeCount
2. 简化判断条件，去掉对selection.type的依赖，避免浏览器兼容性问题
3. 修复原代码中range[index]赋值的错误（原代码range初始为null，直接赋值下标会报错，改为初始化数组后用push添加）

调整后，Chrome中未选文本时（仅光标），isCollapsed为true，不会进入分支，range保持null，符合预期。

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