js - - - - - getSelection 对光标和选区的操作

getSelection

官方MDN地址

示例代码

<template>
  <div>这里是一段默认的文字内容</div>
</template>
<script>
export default {
  name: "Home",
  mounted() {
    document.addEventListener("mouseup", () => {
      console.log("window.getSelection(): ", window.getSelection());
      const str = window.getSelection()?.toString();
      !!str && console.log("选择的文案为:", str);
    });
  },
};
</script> 

从左至右选择一段文本，打印日志如下：

属性

项目	Value
anchorNode	返回该选区起点所在的节点。
anchorOffset	返回一个数字，表示该选区起点在anchorNode中的位置偏移量。
baseNode	和anchorNode的属性一致。
baseOffset	和anchorOffset的属性一致。
extentNode	selection选中文字的结束节点。
extentOffset	选中文字最后所处的标签的偏移量。
focusNode	返回该选区终点所在的节点。
focusOffset	返回一个数字，表示该选区终点在focusNode中的位置偏移量。
isCollapsed	表示选区的起始位置和终止位置是否重合的 Boolean 值，如果为 true，可以认为当前没有内容选中。
rangeCount	选区中包含的 Range 对象数量
type	描述当前选区的类型。（None：当前没有选择；Caret：仅单击，但未选择，选区已折叠（即光标在字符之间，并未处于选中状态）；Range： 选择的是一个范围）

注意：
以上所有属性都是只读属性。

方法

项目	Value
getRangeAt	返回选区开始的节点（Node）。
collapse(光标落在的目标节点, offset)	将当前的选区折叠为一个点。
extend	将选区的焦点移动到一个特定的位置。
modify	修改当前的选区。
collapseToStart	将当前的选区折叠到起始点。
collapseToEnd	将当前的选区折叠到最末尾的一个点。
selectAllChildren	将某一指定节点的子节点框入选区
addRange	一个区域（Range）对象将被加入选区。
removeRange	从选区中移除一个区域。
removeAllRanges	将所有的区域都从选区中移除。
deleteFromDocument	从页面中删除选区中的内容。
selectionLanguageChange	当键盘的朝向发生改变后修改指针的Bidi优先级。
toString	返回当前选区的纯文本内容。
containsNode	判断某一个node是否为当前选区的一部分。

---

参考文献: https://juejin.cn/post/6976147434938302471