我使用 javascript并在其中有一个带有一些html标签的div元素,如下所示,一些元素是嵌套的,我想将它们保持在同一级别,首先html是这样的:
<div>
<p>
some text on here 1
<i>
some italic
<b>text</b>
here
</i> text text text
</p>
<b>
some bold text on here
</b>
</div>
我不知道如何提取这些嵌套元素并将它们保持在同一级别,如下所示:
<div>
<p>
some text on here 1
</p>
<i>
some italic
</i>
<b>text</b>
<i>
here
</i>
<p>
text text text
</p>
<b>
some bold text on here
</b>
</div>
更新1
代码的性能不是太重要!
最佳答案 您可以使用带参数true的.cloneNode()克隆原始节点;如果node .previousElementSibling不为null并且.parentElement不是传递给函数push .parentElement .tagName和.textContent到数组的原始父元素,则迭代父< div>的.childNodes,否则.nodeName是#text,push .textContent到一个数组;如果.nodeName不等于#text,并且元素中只存在#text节点,则将.outerHTML推送到数组;如果node .tagName不等于#text和node .firstChild节点是#text,则推送节点.tagName,.firstChild .textContent,将标签关闭到数组,删除.firstChild;否则递归调用函数
const clone = document.querySelector("div").cloneNode(true);
let flattenNodes = (el, not = el, res = []) => {
for (let node of el.childNodes) {
if (node.nodeName === "#text" && !node.childNodes.length) {
if (node.previousElementSibling && node.parentElement !== not) {
let tag = node.parentElement.tagName.toLowerCase();
res.push(`<${tag}>${node.textContent}</${tag}>`);
} else {
res.push(node.textContent);
}
}
if (node.nodeName !== "#text"
&& Array.from(node.childNodes).every(e => e.nodeName === "#text")) {
res.push(node.outerHTML);
} else {
if (node.tagName && node.tagName !== "#text"
&& node.firstChild.nodeName === "#text") {
let tag = node.tagName.toLowerCase();
res.push(`<${tag}>${node.firstChild.textContent}</${tag}>`);
node.firstChild.remove();
flattenNodes(node, not, res);
}
}
}
return res
}
let res = flattenNodes(clone);
document.querySelector("pre")
.textContent = res.join("");
<div>
<p>
some text on here 1
<i>
some italic
<b>text</b>
here
</i> text text text
</p>
<b>
some bold text on here
</b>
</div>
<pre></pre>