DOM选区操作

2019-11-02

1. Dom范围

const range = document.createRange()

Range对象支持的属性：

startContainer：包含范围起点的节点
startOffset：范围在startContainer中起点的偏移量
endContainer：包含范围终点的节点
endOffset：范围在endContainer中终点的偏移量
commonAncestorContainer：startContainer和endContainer共同的祖先节点在文档树中位置最深的那个

Range对象支持的方法：

selectNode(refNode)：选择整个节点
selectNodeContents(refNode)：选择节点的子节点
setStartBefore(refNode)
setStartAfter(refNode)
setEndBefore(refNode)
setEndAfter(refNode)
setStart(refNode, offset)
setEnd(refNode, offset)
deleteContents：从文档中删除范围所包含的内容
extractContents：从文档中删除范围所包含的内容并且返回范围的文档片段
cloneContents：创建范围中节点的副本
insertNode(refNode)：向范围选区的开始处插入一个节点
surroundContents(refNode)：环绕范围插入内容
collapse(Boolean)：折叠范围到起点或终点
cloneRange()：复制范围
detach()：清理dom范围

2. 富文本选区

const selection = window.getSelection()

Selection对象支持的属性

anchorNode：选区起点所在的节点
anchorOffset：在达到选区起点位置之前跳过的anchorNode中的字符数量
focusNode：选区终点所在的节点
focusOffset：focusNode中包含在选区之内的字符数量
isCollapsed：布尔值，表示选区的起点和终点是否重合
rangeCount：选区中包含的DOM范围的数量

Selection对象支持的方法

addRange(range)：将指定的dom范围添加到选区中
collapse(node, offset)：将选区折叠到指定节点中的相应的文本偏移位置
collapseToEnd()：将选区折叠到终点位置
collapseToStart()：将选区折叠到终起点位置
containsNode(node)：检测指定的节点是否包含在选区中
deleteFromDocument()：从文档中删除选区中的文本
extend(node, offset)：通过将focusNode和focusOffset移动到指定的值来扩展选区
getRangeAt(index)：返回索引对应的选区中的DOM范围
removeAllRanges()：从选区中移除所有DOM范围
removeRange(range)：从选区中移除指定的DOM范围
selectAllChildren(node)：清除选区并选择指定节点的所有子节点
toString()：返回选区所包含的文版内容

需要的跨度（以及所有文本中）与单个退格键删除，这可能吗？

function getLastTextNodeIn(node) { 
    while (node) { 
     if (node.nodeType == 3) { 
      return node; 
     } else { 
      node = node.lastChild; 
     } 
    } 
} 

function isRangeAfterNode(range, node) { 
    var nodeRange, lastTextNode; 
    if (range.compareBoundaryPoints) { 
     nodeRange = document.createRange(); 
     lastTextNode = getLastTextNodeIn(node); 
     nodeRange.selectNodeContents(lastTextNode); 
     nodeRange.collapse(false); 
     return range.compareBoundaryPoints(range.START_TO_END, nodeRange) > -1; 
    } else if (range.compareEndPoints) { 
     if (node.nodeType == 1) { 
      nodeRange = document.body.createTextRange(); 
      nodeRange.moveToElementText(node); 
      nodeRange.collapse(false); 
      return range.compareEndPoints("StartToEnd", nodeRange) > -1; 
     } else { 
      return false; 
     } 
    } 
} 

document.getElementById("editable").onkeydown = function(evt) { 
    var sel, range, node, nodeToDelete, nextNode, nodeRange; 
    evt = evt || window.event; 
    if (evt.keyCode == 8) { 
     // Get the DOM node containing the start of the selection 
     if (window.getSelection && window.getSelection().getRangeAt) { 
      range = window.getSelection().getRangeAt(0); 
     } else if (document.selection && document.selection.createRange) { 
      range = document.selection.createRange(); 
     } 

     if (range) { 
      node = this.lastChild; 
      while (node) { 
       if (isRangeAfterNode(range, node)) { 
        nodeToDelete = node; 
        break; 
       } else { 
        node = node.previousSibling; 
       } 
      } 

      if (nodeToDelete) { 
       this.removeChild(nodeToDelete); 
      } 
     } 
     return false; 
    } 
};