javascript – 如何在js中将嵌套的html元素提取到同一级别

2019年7月2日 166次阅读

我使用 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>
点赞