Question

我有一个DOM对象，例如div与任何孩子。我需要将它正确地细分为两部分：在标记元素之前和之后。例如：

<div>
  <p>para 1</p>
  <a href="#">Some text here
     <b>Bold<em>Italic <span id="marker"></span> </em> any other text</b>
     <p>Cool para 2</p>
  </a>
  <span>Bla-bla</span>
</div>

结果应该是这样的：

<div>
  <p>para 1</p>
  <a href="#">Some text here
     <b>Bold<em>Italic</em></b>
  </a>
</div>

<span id="marker"></span>

<div>
  <a href="#">
     <b><em>text</em> any other text</b>
     <p>Cool para 2</p>
  </a>
  <span>Bla-bla</span>
</div>

如您所见，所有标签都正确关闭，正确链接等。我看到的方法是克隆DOM节点，在第一个节点和它的克隆之间插入标记，删除第一个节点中的右边元素和克隆节点中的左边元素。但是怎么做我不知道。所以我需要纯JS或JQuery中的示例或函数。

Answer 1

文本节点不被视为兄弟节点，因此jQuery DOM遍历方法会忽略它们。要拆分文本字符串，您必须手动解析（或者只是将标记插入更有意义的位置）。此demo应该非常接近您想要的内容，但与标记位于同一级别的文本不会被拆分。

$(document).ready( function() {
    var $contentDiv = $('div');
    var $prev = $contentDiv.clone();
    $prev.find("#marker").parentsUntil('div').andSelf().nextAll().remove();
    $prev.find("#marker").parentsUntil('div').andSelf().prevAll();
    $prev.find("#marker").remove();

    var $next = $contentDiv.clone();
    $next.find("#marker").parentsUntil('div').andSelf().prevAll().remove();
    $next.find("#marker").parentsUntil('div').andSelf().nextAll();
    $next.find("#marker").remove();

    $contentDiv.after($next);
    $contentDiv.after("<hr />");
    $contentDiv.after($prev);
    $contentDiv.after("<hr />");
});

jsFiddle

如何将div与子节点细分为部分

1 个答案: