如何分离或提取 HTML 个标签？

Question

.

我要从 HTML 文件中提取 HTML 元素（标签）。例如：

<div id="collapse" class="collapse" data-parent="#accordion"></div>
<div class="card-body">Lorem ipsum dolor sit amet, consectetur</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<ul>
    <liLorem ipsum dolor sit amet, consectetur</li>
    <li class="list">Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<input type="hidden" name="controlAccount" id="controlAccount" class="input" value="1">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="">SUBMIT</button>

我需要这样的结果；

<div id="collapse1" class="collapse"></div>
<div class="card-body"></div>
<p class="text"></p>
<p></p>
<ul>
    <li></li>
    <li class="list"></li>
</ul>
<input id="controlAccount" class="input">
<button class="slick-prev slick-arrow"></button>

我只想在 HTML 文件中保留 ID 和类。 可能吗？你知道任何网站或简单的方法或任何软件吗？ Visual Studio 代码或记事本++ ?

的任何插件

.

Answer 1

看来您只想复制具有适当标签名称、ID 和类的结构。

一种方法是构建一棵代表 HTML 的树。之后，您可以从中渲染新的 HTML 。如果你想适应这个，你需要读入文件并将它添加到 DOM，像实际的 HTML 一样对待它，然后你可以描述和渲染改变的 HTML ].这只是一个简单的例子。

您基本上想要执行以下操作：

const main = () => {
  let root = document.body
  let tree = describeHTML(root)
  let html = renderHTML(tree)
  console.log(html.innerHTML)
}

const main = () => {
  console.log(emptyInnerHTML(document.body))
}

const emptyInnerHTML = (element) => {
  return renderHTML(describeHTML(element)).innerHTML
}

const describeHTML = (node) => {
  return ({
    tagName: node.tagName,
    id: node.id || undefined,
    classList: [...node.classList],
    children: [...node.childNodes]
      .filter(child => child.nodeType != Node.TEXT_NODE && child.tagName !== 'SCRIPT')
      .map(child => describeHTML(child))
  })
}

const renderHTML = (tree) => {
  let node = document.createElement(tree.tagName)
  if (tree.id) node.setAttribute('id', tree.id)
  if (tree.classList && tree.classList.length) node.className = tree.classList.join(' ')
  if (tree.children && tree.children.length) {
    tree.children.forEach(child => node.appendChild(renderHTML(child)))
  }
  return node
}

main()

<div id="collapse" class="collapse" data-parent="#accordion"></div>
<div class="card-body">Lorem ipsum dolor sit amet, consectetur</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur</li>
  <li class="list">Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<input type="hidden" name="controlAccount" id="controlAccount" class="input" value="1">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="">SUBMIT</button>

输出

<div id="collapse" class="collapse"></div>
<div class="card-body"></div>
<p class="text"></p>
<p></p>
<ul>
  <li></li>
  <li class="list"></li>
</ul>
<input id="controlAccount" class="input">
<button class="slick-prev slick-arrow"></button>

树视图

{
  "tagName": "BODY",
  "children": [
    {
      "tagName": "DIV",
      "id": "collapse",
      "classList": [ "collapse" ]
    },
    {
      "tagName": "DIV",
      "classList": [ "card-body" ]
    },
    {
      "tagName": "P",
      "classList": [ "text" ]
    },
    {
      "tagName": "P"
    },
    {
      "tagName": "UL",
      "children": [
        {
          "tagName": "LI"
        },
        {
          "tagName": "LI",
          "classList": [ "list" ]
        }
      ]
    },
    {
      "tagName": "INPUT",
      "id": "controlAccount",
      "classList": [ "input" ]
    },
    {
      "tagName": "BUTTON",
      "classList": [ "slick-prev", "slick-arrow" ]
    }
  ]
}

如何分离或提取 HTML 个标签？

How to Seperate or Extract HTML Tags?

html

javascript

jquery

notepad++

visual-studio-code

输出

树视图