首先为我糟糕的英语感到高兴。我尽量把我的问题解释清楚!
所以我的问题是,如果span html元素中有类似的元素,我需要将其拆分

<span>
  bla-bla \r\n
    <div>hello</div>
  world:)
</span>

进入之内
<span>
  bla-bla \r\n
</span>
<div>
  hello
</div>
<span>
  world:)
</span>

如果span有多个div或者有多个
<span class="bold">
  bla
  <span class="anyclass">
    bla
    <div>
      Hello
    </div>
    bla
    <span class="anyclass#2">
      bla-bla
    </span>
    <h1>
      amigo
    </h1>
    <span class="anyclass#3">
      <h2>
        :)
      </h2>
      world
    </span>
  </span>
  la-la
</span>

应该分成两部分
<span class="bold">
  bla
  <span class="anyclass">
    bla
  </span>
</span>
<div>
  Hello
</div>
<span class="bold">
  <span class="anyclass">
    bla
    <span class="anyclass#2">
      bla-bla
    </span>
  </span>
</span>
<h1>
  amigo
</h1>
<span class="bold">
  <span class="anyclass">
    <span class="anyclass#3">
    </span>
  </span>
</span>
<h2>
  :)
</h2>
<span class="bold">
  <span class="anyclass">
    <span class="anyclass#3">
      world
    </span>
  </span>
  la-la
</span>

好吧,可能会有多个div和h1,或者它们中的任何一个在span内,或者可能有多个插入的span和div在它们内部,我真的被困在里面了。
我知道它看起来很恐怖,但我需要做点什么!
如果有人知道怎么解决这个拼图,知道什么,或是满脸都是的,请帮帮我!
谢谢!

最佳答案

这比看上去复杂得多。以下是我的解决方案:
jsfiddle

function removeSiblings(el, before) {
    var parent = el.parentNode;
    var children = [].slice.call(parent.childNodes);
    var active = !!before;
    for (var i = 0; i < children.length; i++) {
        if (children[i] == el) {
            active = !active;
        } else if (active) {
            parent.removeChild(children[i]);
        }
    }
}

function removeBeforeOrAfter(top, path, before) {
    var els = [];
    for (var i = 0; i < path.length; i++) {
        els.push(restorePath(top, path.slice(0, i + 1)));
    }
    for (var i = 0; i < els.length; i++) {
        removeSiblings(els[i], before);
    }
}

var indexPath = [];
function walkPath(el, condition) {
    if (el.nodeType !== Node.ELEMENT_NODE) {
        return null;
    }
    if (!condition(el)) {
        return el;
    }
    var children = [].slice.call(el.childNodes);
    for (var i = 0; i < children.length; i++) {
        indexPath.push(i);
        var result = walkPath(children[i], condition);
        if (result) {
            return result;
        }
        indexPath.pop();
    }
    return null;
}

function restorePath(el, path) {
    for (var i = 0; i < path.length; i++) {
        el = el.childNodes.item(path[i]);
    }
    return el;
}

function isInlineElement(el) {
    return /^(A|B|BR|CODE|I|IMG|SPAN|STRONG)$/.test(el.tagName); // list not complete
}

function split(wrongNode, topNode, indexPath) {
    var clone = topNode.cloneNode(true);
    var wrongClone = restorePath(clone, indexPath);
    if (topNode.nextSibling) {
        topNode.parentNode.insertBefore(clone, topNode.nextSibling);
    } else {
        topNode.parentNode.appendChild(clone);
    }
    removeBeforeOrAfter(topNode, indexPath, false);
    topNode.parentNode.insertBefore(wrongNode, topNode.nextSibling);
    removeBeforeOrAfter(clone, indexPath, true);
    wrongClone.parentNode.removeChild(wrongClone);
}

$(document).ready(function() {
    var nodes = document.body.childNodes; // live nodeList!
    for (var i = 0; i < nodes.length; i++) {
        var wrongNode = walkPath(nodes[i], isInlineElement);
        if (wrongNode) {
            split(wrongNode, nodes[i], indexPath);
        }
        indexPath = [];
    }
});

10-05 20:56
查看更多