获取内容可编辑innerHTML的子内容

Question

我想在按键时将contenteditable的内容分成两部分。

<div contenteditable="true">This is <b>my content</b></div>

我想将此句子的子字符串（不带HTML）从0到10，即：

这是我

在JS中，如果知道关闭将被切断的标签，有没有办法做到这一点？还是我需要编写一个函数来确定节点并手动关闭它？

我想返回：

This is <b>my</b>

和

<b> content</b>

这里是检索插入符号左侧的代码：

traverse = ( node: Node, selectedNode: Node, offset, direction = 0, parent = true ) => {
    if ( node.nodeName === '#text' ) {
      if ( node.isEqualNode(  selectedNode ) ) {
        return [ node.textContent.substr( 0, offset  ), node.textContent.substr( offset  ) ];
      }
      return node.textContent;
    }
    if ( node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 ) {
      if ( node.childNodes[0].isEqualNode(  selectedNode ) ) {
        const newNode1 = node.cloneNode();
        const newNode2 = node.cloneNode();
        newNode1.innerHTML = node.childNodes[0].textContent.substr( 0, offset  );
        newNode2.innerHTML = node.childNodes[0].textContent.substr( offset );
        return [ newNode1.outerHTML, newNode2.outerHTML ];
      }
      return node.outerHTML;
    }
    if ( node.childNodes.length > 1 ) {
      let content = '';
      let found = false;
      for ( let x = 0; node.childNodes[x] && !found; x++ ) {
        let resp = this.traverse(  node.childNodes[x], selectedNode, offset, direction, false );
        if ( Array.isArray( resp ) ) {
          content += resp[0];
          found = true;
        } else {
          content += resp;
        }
      }
      if ( !parent ) {
        const newNode = node.cloneNode();
        newNode.innerHTML = content;
        return newNode.outerHTML;
      } else {
        return content;
      }
    }
  }

Answer 1

嗯，经过大量的反复试验，我弄清楚了。此函数接受一个元素或节点，选定的节点以及选定的节点的偏移量，并将返回两个HTML字符串，这些字符串分为两部分，并带有正确关闭的标记。