javascript - 获取内容可编辑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 字符串。

traverse = ( node: Node, selectedNode: Node, offset, parent = true ) => {
    let found = false;
    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 = ['', ''];
      for ( let x = 0; node.childNodes[x]; x++ ) {
        const resp = this.traverse(  node.childNodes[x], selectedNode, offset, false );
        if ( Array.isArray( resp ) ) {
          content[0] += resp[0];
          content[1] += resp[1];
          found = true;
        } else {
          if ( found ) {
            content[1] += resp;
          } else {
            content[0] += resp;
          }
        }
      }
      if ( !parent ) {
        const newNode1 = node.cloneNode();
        const newNode2 = node.cloneNode();
        newNode1.innerHTML = content[0];
        newNode2.innerHTML = content[1];
        if ( found ) {
          return [ newNode1.outerHTML, newNode2.outerHTML ];
        } else {
          return newNode1.outerHTML;
        }
      } else {
        if ( found ) {
          return content;
        } else {
          return content[0];
        }
      }
    }
  }