在 JavaScript DOM 中拆分节点内容

发布于 2024-12-01 22:09:35 字数 450 浏览 1 评论 0原文

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

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

我将如何执行此操作？

原文

I have a scenario where I need to split a node up to a given ancestor, e.g.

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

needs to be split into:

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

and

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

How would I go about doing this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青丝拂面 2024-12-08 22:09:35

这是一个适用于使用 Range 的现代浏览器的解决方案。对于 IE < 可以做类似的事情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 一起使用；根据 Range.setStart 的行为，偏移量的功能会有所不同

Here is a solution that will work for modern browsers using Range. Something similar could be done for IE < 9 using TextRange, but I use Linux so I don't have easy access to those browsers. I wasn't sure what you wanted the function to do, return the nodes or just do a replace inline. I just took a guess and did the replace inline.

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

Demo: jsbin

It expects a TextNode for node, although it will work with an Element; the offset will just function differently based on the behavior of Range.setStart

回复收藏 0 原文

深海夜未眠 2024-12-08 22:09:35

请参阅方法 Text.splitText。

回复收藏 0 原文

最终幸福 2024-12-08 22:09:35

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

向函数传递一个您希望移动到的元素和节点标签名称字符串。

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

Not sure if this helps you, but this is what I came up with...

Pass the function an element and a node tag name string you wish to move up to.

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

回复收藏 0 原文

~没有更多了~