Selection文本选择

Selection对象表示用户选择的文本范围或插入符号的当前位置

使用window.getSlection获取Selection对象

const selection = window.getSelection();


anchor指向开始选择的地方,focus指向结束的地方;
range是文档中连续的一部分,chrome中只能选一个区域,rangeCount是1,如果可以选择多个范围:

获取所选择的range

const range = window.getSelection().getRangeAt(0);

可以使用toString方法返回选中的纯文本

window.getSelection().toString() // "hello world"

Range对象表示包含节点和部分文本节点的文档片段,可以使用document.createrage创建,也可以从Selection对象的getRangeAt方法获取

场景:选择element节点文本

const selection = window.getSelection(); // 获得Selection
const range = document.createRange(); // 创建Range

range.selectNodeContents(element);  // 设定一个包含element节点内容的Range
selection.removeAllRanges(); // 移除所有区域
selection.addRange(range); // 将区域range加入选区

兼容低版本IE的可以用

const range = document.body.createTextRange();
range.moveToElementText(elevament);
range.select();

参考:
Range - Web API 接口 | MDN
Selection - Web API 接口 | MDN

Comments
Write a Comment