在 JavaScript DOM 中拆分节点内容 -

Question

这个现有的答案是一段出色的代码，几乎可以满足我的要求。就像那个问题中的 OP 一样，我希望拆分 HTML 标签，但基于标签而不是偏移量，并以不应拆分的项目为界。

也就是说，我想把这个：

<p>
  <strong>hi there, how <em>are <span>y<!--break-->ou</span> doing</em> today?</strong>
</p>

进入这个：

<p>
  <strong>hi there, how <em>are <span>y</span></em></strong>
  <!--break-->
  <strong><em><span>ou</span> doing</em> today?</strong>
</p>

我仍然对 javascript 有所了解，所以当我玩弄@Hemlock 提供的 jsbin 时，我无法让它按照我的意图去做。

给出的答案是：

function splitNode(node, offset, limit) {
  var parent = limit.parentNode;
  var parentOffset = getNodeIndex(parent, limit);

  var doc = node.ownerDocument;  
  var leftRange = doc.createRange();
  leftRange.setStart(parent, parentOffset);
  leftRange.setEnd(node, offset);
  var left = leftRange.extractContents();
  parent.insertBefore(left, limit);
}

function getNodeIndex(parent, node) {
  var index = parent.childNodes.length;
  while (index--) {
    if (node === parent.childNodes[index]) {
      break;
    }
  }
  return index;
}

Answer 1

不需要范围，您只需要复制所有剪切元素并移动它们的子元素：

function splitOn(bound, cutElement) {
    // will divide the DOM tree rooted at bound to the left and right of cutElement
    // cutElement must be a descendant of bound
    for (var parent = cutElement.parentNode; bound != parent; parent = grandparent) {
        var right = parent.cloneNode(false);
        while (cutElement.nextSibling)
            right.appendChild(cutElement.nextSibling);
        var grandparent = parent.parentNode;
        grandparent.insertBefore(right, parent.nextSibling);
        grandparent.insertBefore(cutElement, right);
    }
}

( jsfiddle 演示)