get node for character offset

一、作用

二、获取字符偏移的节点

备注

• TEXT_NODE 由 HTMLNodeType#TEXT_NODE 提供

/**
 * Get object describing the nodes which contain characters at offset.
 *
 * 获取描述包含指定偏移字符的节点的对象。
 *
 * @param {DOMElement|DOMTextNode} root
 * @param {number} offset
 * @return {?object}
 */
function getNodeForCharacterOffset(root: Element, offset: number): ?Object {
  let node = getLeafNode(root);
  let nodeStart = 0;
  let nodeEnd = 0;

  while (node) {
    if (node.nodeType === TEXT_NODE) {
      nodeEnd = nodeStart + node.textContent.length;

      if (nodeStart <= offset && nodeEnd >= offset) {
        return {
          node: node,
          offset: offset - nodeStart,
        };
      }

      nodeStart = nodeEnd;
    }

    node = getLeafNode(getSiblingNode(node));
  }
}

export default getNodeForCharacterOffset;

三、工具

1. 获取叶子节点

/**
 * Given any node return the first leaf node without children.
 * 给定任意节点，返回第一个没有子节点的叶子节点。
 *
 * @param {DOMElement|DOMTextNode} node
 * @return {DOMElement|DOMTextNode}
 */
function getLeafNode(node: ?(Node | Element)) {
  while (node && node.firstChild) {
    node = node.firstChild;
  }
  return node;
}

2. 获取兄弟节点

/**
 * Get the next sibling within a container. This will walk up the
 * DOM if a node's siblings have been exhausted.
 *
 * 在容器中获取下一个兄弟节点。如果节点的兄弟节点已经用尽，这将向上遍历 DOM。
 *
 * @param {DOMElement|DOMTextNode} node
 * @return {?DOMElement|DOMTextNode}
 */
function getSiblingNode(node: ?(Node | Element)) {
  while (node) {
    if (node.nextSibling) {
      return node.nextSibling;
    }
    node = node.parentNode;
  }
}