javascript - 在 JavaScript DOM 中拆分节点内容

Question

我有一个场景，我需要将一个节点拆分为给定的祖先，例如

<strong>hi there, how <em>are <span>you</span> doing</em> today?</strong>

需要拆分成:

<strong>hi there, how <em>are <span>y</span></em></strong>

和

<strong><em><span>ou</span> doing</em> today?</strong>

我该怎么做？

Answer 1

这是一个适用于使用 Range 的现代浏览器的解决方案。可以使用 TextRange 对 IE < 9 执行类似的操作，但我使用 Linux，因此无法轻松访问这些浏览器。我不确定你想要函数做什么，返回节点或者只是做一个内联替换。我只是猜测并进行了内联替换。

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

演示:jsbin

它期望 node 有一个 TextNode，尽管它可以与 Element 一起工作；偏移量将根据 Range.setStart 的行为以不同方式发挥作用。