时间戳

首页 > 解决方案 > 想将下面的html转换成JSON结构

javascript - 想将下面的html转换成JSON结构

问题描述

这是我的 HTML 代码

<table id="detailtab" style="" border="1">
  <tbody id="load-attr">
    <tr>
      <td style="padding: 4px">No of bidder participated in SB&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;&nbsp;<span>then eliminate</span>&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;bidder&nbsp;
      </td>
    </tr>
    <tr>
      <td style="padding: 4px">No of bidder participated in SB&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;&nbsp;<span>then eliminate</span>&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;bidder&nbsp;
      </td>
    </tr>
    <tr>
      <td style="padding: 4px">No of bidder participated in SB&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;&nbsp;<span>then eliminate</span>&nbsp;<input type="number" value="0" max="5" min="0" style="text-align:right">&nbsp;bidder&nbsp;
      </td>
    </tr>
  </tbody>
</table>

我想将此html代码转换为下面的json结构

{
    "noOfPredicates": 3,
    "predicates": [{
        "elements": [{
            "label": "No of bidder participated in SB",
            "pre": true,
            "value": "",
            "type": "number",
            "options": [],
            "classAttr": "",
            "visible": true,
            "readonly": false
        }, {
            "label": "",
            "pre": true,
            "value": "then eliminate",
            "type": "display",
            "options": [],
            "classAttr": "",
            "visible": true,
            "readonly": false
        }, {
            "label": "bidder",
            "pre": false,
            "value": "",
            "type": "number",
            "options": [],
            "classAttr": "",
            "visible": true,
            "readonly": false
        }]
    }]
}
  1. noOfPredicates是每行的表行数，其中一个td包含 objects 的元素数组。
  2. pre : true 表示标签应该在输入类型之前或在输入类型之后。
  3. 如果 type : display 表示它应该是 span。

标签： javascripthtmlarraysjsonjsp

解决方案

我建议你直接使用 DOM 元素的规则集。

const jsonObject = {};

const table = document.querySelector('table');

function parseHtml(element) {
  Object.entries(element.attributes).forEach(attribute => {
    // add desired data to jsonObject structure
  });
  
  element.children.forEach(child => parseHtml(child));
}

parseHtml(table);

在这里，您可以看到我创建了一个递归函数，可以帮助您完成任务。

PS 甚至不尝试将其解析为字符串或使用正则表达式，这是没有希望的。只需使用 DOM，如果您有一个不是 DOM 的字符串，则将其从字符串转换为：

var div = document.createElement('div');
div.innerHTML = htmlString;

最良好的祝愿，尤金。

推荐阅读