如何在js中将嵌套的html元素提取到相同级别 [英] how to extract nested html element to same level in js

问题描述

我使用javascript并有一个div元素，其中包含一些html标记，如下所示，其中一些元素是嵌套的，我想将它们保持在同一级别，第一个html就是这样的:

I use javascript and have a div element with some html tags inside it like below, some of the elements are nested and I want to keep them in the same level, first html is like this:

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

我不知道如何提取这些嵌套元素并将它们保持在同一级别，就像这样:

I don't know how I can extract those nested elements and keep them on the same level, something like this:

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

代码的性能不是太重要！

The performance of the code is not too important!

推荐答案

您可以使用带有参数 true 的 .cloneNode()克隆原始节点.如果节点 .previousElementSibling 不是 null 和，则迭代父< div> 的 .childNodes .parentElement 不是传递给函数push .parentElement .tagName 和 .textContent 到数组的原始父元素，否则为.nodeName 是 #text ，将 .textContent 推入数组；如果 .nodeName 不等于 #text ，并且元素中仅存在 #text 节点，则将 .outerHTML 推入数组;如果节点 .tagName 不等于 #text ，并且节点 .firstChild 节点为 #text ，则推送节点 .tagName ， .firstChild .textContent ，关闭标签到数组，删除 .firstChild ;否则递归调用函数

You can clone original node using .cloneNode() with parameter true; iterate the .childNodes of parent <div>, if node .previousElementSibling is not null and .parentElement is not original parent element passed to function push .parentElement .tagName and .textContent to array, else .nodeName is #text, push .textContent to an array; if .nodeName does not equal #text and only #text nodes exist within element, push .outerHTML to array; if node .tagName does not equal #text and node .firstChild node is #text, push node .tagName, .firstChild .textContent, closing tag to array, remove .firstChild; else recursively call function

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>

这篇关于如何在js中将嵌套的html元素提取到相同级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！