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];
        }
      }
    }
  }

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

1 个答案: