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的现代浏览器的解决方案。可以对IE＆lt;进行类似的操作。 9使用TextRange，但我使用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

预计TextNode为node，但它会与Element一起使用;根据{{3}}

的行为，偏移量的功能会有所不同

Answer 2

请参阅方法Text.splitText。

Answer 3

不确定这是否对您有所帮助，但这就是我想出来的......

将函数传递给您希望移动到的元素和节点标记名称字符串。

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

<script type="text/javascript">


  function findParentNode(element,tagName){
    tagName = tagName.toUpperCase();
    var parentNode = element.parentNode;
    if (parentNode.tagName == tagName){
    //Erase data up to and including the node name we passed
    console.log('Removing node: '+parentNode.tagName+'  DATA: '+parentNode.firstChild.data);
    parentNode.firstChild.data = '';
    return parentNode;
}
    else{
    console.log('Removing node: '+parentNode.tagName+'  DATA: '+parentNode.firstChild.data);
    //Erase the first child's data (the first text node and leave the other nodes intact)
    parentNode.firstChild.data = '';
    //Move up chain of parents to find the tag we want. Return the results so we can do things with it after
    return findParentNode(parentNode, tagName)
}
  }
var ourNode = document.getElementById("span");

alert(findParentNode(ourNode,'strong').innerHTML);


</script>

在JavaScript DOM中拆分节点内容

3 个答案: