时间戳

首页 > 解决方案 > 将 HTML 字符串转换为 JSON 对象

javascript - 将 HTML 字符串转换为 JSON 对象

问题描述

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

目前我收到一个项目表（为简单起见而减少）作为一个巨大的字符串，几乎有 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似乎不起作用，我的思考过程是否正确，我应该如何看待正则表达式模式以更好地针对这一点？

标签： javascript

解决方案

您可以将 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
    };
  })
);

推荐阅读