Javascritp Selection 与 Range

在操作文本框或者可编辑元素的时候，我们可能会使用到这两个api。在这里简单记录下区别。

• Range
• Selection

Selection 指代的是用户选择的区域。该区域可以是多个，但目前谷歌并不支持选择多个，但Firefox应该是支持的。

Range也是代表一段区域，这个这个区域是很抽象的，他不像Selection那样你看到了选择的具有蓝色背景的区域，那就是Selection。而Range可以通过js去构造并选择，而实际用户看不到任何选择。

下图：selection是可以看到的

Range既可以是上边选择的区域，也可以通过JS创建。

const someRange = document.createRange();

// 假设有这样一段div
<div id="text-node">hello world</div>

const textNode = document.getElementById('text-node').childNodes[0] 

someRange.setStart(textNode, 0);
someRange.setEnd(textNode, 4);

console.log(someRange.toString()) // hell

从API的角度

const selection = window.getSelection(); // 返回Selection对象

const range = selection.getRangeAt(0) // 获取到Selection对象下第一个Range。事实上只能有一个。firefox允许选择多个

更多可以参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Range

https://developer.mozilla.org/zh-CN/docs/Web/API/Selection