在 JavaScript DOM 中拆分节点内容 -

Splitting node content in JavaScript DOM -

本文关键字：节点 拆分 JavaScript DOM      更新时间：2023-09-26

这个现有的答案是一段优秀的代码，几乎可以做到我想要的。 就像问题中的 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;
}

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

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 演示(

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

这个答案的问题在于它不会开始/或完成任何拆分标签，就像在您的情况下一样，是 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>
相关文章：