getRangeAt()函数中index参数的作用是什么？多选区场景下如何使用？

getRangeAt() 的 index 参数作用 #

getRangeAt(index) 是 Selection 选区对象的原生方法，index 为从0开始的整数，作用是指定获取当前选区内的第几个 Range 区间对象。

• Selection 可以同时包含多个不连续的 Range 区间，当前选区的总区间数量可以通过 selection.rangeCount 获取
• 当传入的 index 大于等于 rangeCount 时，浏览器会直接抛出错误
• 普通单选区场景下rangeCount固定为1，所以通用写法都是传0获取唯一的选区区间，和你示例代码中的用法一致

多选区适用场景 #

确实大部分浏览器默认只支持单个选区，但存在很多可以让index参数生效的场景：

1. Firefox浏览器原生支持多选区操作：按住Ctrl键（Mac系统按住Command键）即可选中多个不连续的文本区域，此时rangeCount会等于你选中的区域数量，传入不同的index即可依次获取每个选区的内容。
   你可以把示例中的JS代码修改为如下形式，在Firefox下测试多选区效果：

$('button').on('click', function(){
  var sel = document.getSelection();
  // 遍历所有选区输出内容
  for(let i = 0; i < sel.rangeCount; i++) {
    console.log(`第${i+1}个选区内容：`, sel.getRangeAt(i).toString());
  }
});

2. 自定义富文本编辑器、在线标注工具、协作文档类产品：这类产品通常会自行实现多选区能力，通过JS存储多个Range区间来支持批量格式化、批量标注、批量删除等操作，此时也需要通过index参数定位不同的选中区间。

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