getSelection限制选取范围

// 选择容器元素
const box = document.queryselector('.box');
 
// 监听选择事件
document.addEventListener('mouseup', (e) => {
  // 如果选择不在box内部，清除选择
  if (!box.contains(e.target)) {
    window.getSelection().removeAllRanges();
  }
});
 
// 监听键盘事件，以防用户使用键盘进行选择
document.addEventListener('keyup', (e) => {
  // 检查是否有文本被选中
  const selection = window.getSelection();
  if (!box.contains(selection.anchorNode)) {
    selection.removeAllRanges();
  }
});

在自己手写富文本编辑器时通常会用到这一点

//通过vue3绑定编辑器dom
const editorRef = ref()

//选中的文本
const text = ref('')
//选择器
const selection = ref({})
//位置信息
const range = ref(null)
//选中的文本所在节点
const node = ref(null)
const getContext = ()=>{
   selection.value = window.getSelection()
   if(selection.value.isCollapsed) return
   if(selection.value.rangeCount <= 0) return
   text.value = selection.value.toString()
   range.value = selection.value.getRangeAt(0)
   //父节点
   const element = range.value.commonAncestorContainer;
   /*过滤不是元素节点情况
   contains用于判断某个dom节点是否为另一个节点的子元素。
   用法示例:parentNode.contains(childNode)
   当前语句意为：当选中内容为dom且处于编辑器区域中时，获取被选中的文本所在的dom节点，
   并将之存入变量，如果不是dom节点那么将它的父元素存入变量。如果选中的内容超出了
   编辑器区域直接存入null，这样就可以起到限制getSelection()作用范围的效果。有兴趣的可以
   看看我写的简易版富文本编辑器，目前正在编码中后续测试无BUG后会贴出地址。
   */
   if (element.nodeType === Node.ELEMENT_NODE && editorRef.value.contains(element)) {
      node.value = element
    } else if(editorRef.value.contains(element.parentElement)){
      node.value = element.parentElement
   }else{
      node.value = null
   }
  
}