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

window.getSelection

  • 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