首先为我糟糕的英语感到高兴。我尽量把我的问题解释清楚!
所以我的问题是,如果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 = [];
}
});