Question

This existing answer is an excellent piece of code几乎完全符合我的要求。就像问题中的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 demo）

Answer 2

您可以通过考虑如何将内容拆分为数组并稍后将字符串合并在一起来构建自己的拆分函数。

这个答案的问题是它没有启动/也没有完成任何拆分标记，就像你的情况一样，是SPAN元素。

<script>
    var content = document.getElementById('content');
    var elements = document.getElementsByTagName('strong');
    var array = element.split("<!--break-->"); 

    var string = '';
    for(var i = 0; i < array.length; i++) {
        string += '<strong>' + sarray[i] + "</strong>';
    }

    content.innerHTML = string;
</script>

<div id="content">
    <strong>hi there, how <em>are <span>y<!--break-->ou</span> doing</em> today?</strong>
</div>

在JavaScript DOM中拆分节点内容 -

2 个答案: