开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

最近在做到编辑器的业务时,在contenteditable设置的输入框内粘贴纯文本,导致需要手动设置光标的位置.因此需要使用到Selection对象,因此写篇文章来记录一下.

Selection对象的获取

使用window.getSelection()或者document.getSelection()获取,会返回一个Selection对象,表示用户选择的文本范围或者是当前光标的位置.

语法


const selection = window.getSelection() ; // const selection = document.getSelection()

selection是一个对象,包含以下属性:

anchorNode: 选择文本开始所在的节点信息
anchorOffset:表示选选区在anchorOffset中的位置偏移量,也就是文本的长度
focusNode:表示选区终点所在的节点
focusOffset:返回一个数字,表示选择文本结束所在的节点位置
isCollapsed:判断选区的起始节点和结束节点是否在同一个位置
rangeCount:返回选区的包含的数量
getRangeAt():可以使用索引来获取上述rangeCount的全部选区
collapse():将结束光标和开始光标合并在一起
extend():将焦点移动到一个特定的位置
modify():修改当前的选区
collapseToStart():将选区折叠到起始点
collapseToEnd():将选区折叠到结束点
selectAllChildren(): 将指定节点放入到选区当中
addRange():将Range对象加入到选区中
removeRange():从选区中移除区域
removeAllRanges():移除所有的区域
toString:返回当前选区的纯文本内容
containsNode:判断某个节点是否是选区的内容

Range对象

选中的文字的位置信息包含在range对象中,通过Range对象可以做一些操作. 可以使用document.createRange方法创建一个range对象,也可以使用上面我们说的selection对象的getRangeAt()方法来来获取Range对象. Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何区域的元素。

var  range = document.createRange();

getRangeAt(0)：获取当前选中的range对象
range.cloneContents 克隆选中文档片段
range.deleteContents 删除选中片段
range.startContainer 指用户选择内容开始处的容器节点
range.endContainer 指用户选择内容结尾处的容器节点
range.startOffset 开始容器的节点位置
range.endOffset 结尾容器的节点位置
range.insertNode 插入节点

Selection对象闪亮登场

Selection对象的获取

语法

Range对象