将 HTML 字符串转换为 JSON 对象

Question

我正在使用我的一个旧的硬编码网站，并试图从 HTML 中剥离数据并将其放入一个新的 JSON 对象中。

目前我收到一个项目表（为简单起见减少了）作为 1 个巨大的字符串，几乎有 1000 行。任何 HTML 上都没有类或属性

let tableString = `
    <tr>
        <td>01/01/1999</td>
        <td>Item 1</td>
        <td>55</td>
    </tr>
    <tr>
        <td>01/01/2000</td>
        <td>Item 2</td>
        <td>35</td>
    </tr>
`

我正在努力实现以下目标

[{
    date: '01/01/1999',
    name: 'Item 1',
    cost: 55
},
{
    date: '01/01/2000',
    name: 'Item 2',
    cost: 35
}]

我已经实现的当前代码

let newData = []

let stringArray = results.split('</tr>')

stringArray.map(item => {

    let stripped = item.replace('/n', '')
        stripped = stripped.replace('<tr>', '')

    let items = stripped.split('<td>')

    let newItem = {
        data: items[0],
        name: items[1],
        cost: items[2]
    }

    return newData.push(newItem)
})

我拿着巨大的绳子，在每个项目的末尾把它分开。这有效，但是它从项目本身中剥离了实际标签，并给我留下了一个额外的（我的数组中的空字符串项目）。

接下来，我将映射数组中的每个字符串，并进一步尝试去除所有换行符以及表格单元格数组，然后理论上我可以构建我的对象（在我去除表格单元格之后）。

然而，当我这样做时，replace似乎并没有奏效，我的思考过程对我的前进方式是否正确，我是否应该查看正则表达式模式以更好地针对这一点？

Answer 1

您可以将 trs 粘贴到表格中并处理表格元素中的数据。

let tableString = `
    <tr>
        <td>01/01/1999</td>
        <td>Item 1</td>
        <td>55</td>
    </tr>
    <tr>
        <td>01/01/2000</td>
        <td>Item 2</td>
        <td>35</td>
    </tr>
`;

const table = document.createElement('table');
table.innerHTML = tableString;

console.log(
  [...table.querySelectorAll('tr')].map(tr => {
    return {
      date: tr.children[0].innerText,
      name: tr.children[1].innerText,
      cost: tr.children[2].innerText
    };
  })
);