javascript - 如果 html 内联元素内部有 block 元素，如何使用 javascript 拆分它

Question

首先请原谅我的英语不好。我会尽力解释我的问题!

所以我的问题是我需要拆分 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，比如

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

好吧，在 span 中可能有多个 div 和 h1 或其中的任何一个，或者在它们内部可能有多个插入的 span 和 div，我真的陷入其中。

我知道它看起来令人毛骨悚然，但我需要用它做点什么!

如果有人知道如何解决这个拼图，或者知道一些事情或者已经遇到类似的事情，请帮助我!

非常感谢!

Answer 1

这比看起来要复杂得多。这是我的解决方案:

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 = [];
    }
});