Javascritp Selection 与 Range

旧城等待， 2023-01-16 15:25 82阅读 0赞

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

*  Range
 *  Selection

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

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

下图：selection是可以看到的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
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_Range]

[https://developer.mozilla.org/zh-CN/docs/Web/API/Selection][https_developer.mozilla.org_zh-CN_docs_Web_API_Selection]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221022/d56fa5c444b1462d9b093a7261cffe7a.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Range]: https://developer.mozilla.org/zh-CN/docs/Web/API/Range
[https_developer.mozilla.org_zh-CN_docs_Web_API_Selection]: https://developer.mozilla.org/zh-CN/docs/Web/API/Selection