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

Answer 2

这是一个使用子字符串和indexOfs的 while 循环。 它利用 indexOf 经常被忽视的第二个参数，它允许您指定搜索的最小起始位置。 最好只创建 HTML 表格元素并读取每个 td 的 innerHTML，但如果这对您来说更容易，那么您可以这样做：

 let str = ` <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> `; var BEGIN = "<td>"; var END = "</td>"; var objs = []; while (str.indexOf(BEGIN) > -1 && str.indexOf(END, str.indexOf(BEGIN)) > -1) { var obj = {}; obj.date = str.substring(str.indexOf(BEGIN) + BEGIN.length, str.indexOf(END, str.indexOf(BEGIN))); str = str.substring(0, str.indexOf(BEGIN)) + str.substring(str.indexOf(END, str.indexOf(BEGIN)) + BEGIN.length); obj.name = str.substring(str.indexOf(BEGIN) + BEGIN.length, str.indexOf(END, str.indexOf(BEGIN))); str = str.substring(0, str.indexOf(BEGIN)) + str.substring(str.indexOf(END, str.indexOf(BEGIN)) + BEGIN.length); obj.const = str.substring(str.indexOf(BEGIN) + BEGIN.length, str.indexOf(END, str.indexOf(BEGIN))); str = str.substring(0, str.indexOf(BEGIN)) + str.substring(str.indexOf(END, str.indexOf(BEGIN)) + BEGIN.length); objs.push(obj); } console.log(objs);

Answer 3

正如其他人所建议的：

1. 创建隐藏表
2. 用行数据填充它
3. 返回带有字段的映射 JSON 数组

 const 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> `; console.log(tableRowsToJSON(tableString, ['date', 'name', 'cost'])); function tableRowsToJSON(tableRows, fields) { let table = document.querySelector('.hidden-table'); populateTable(emptyTable(table), tableRows); return Array.from(table.querySelectorAll('tbody tr')).map(tr => { let tds = tr.querySelectorAll('td'); return fields.reduce((obj, field, index) => { return Object.assign(obj, { [field] : tds[index].textContent }); }, {}); }); } function populateTable(table, dataString) { if (table.querySelector('tbody') == null) { table.appendChild(document.createElement('tbody')); } table.querySelector('tbody').innerHTML = dataString; return table; } function emptyTable(table) { let tbody = table.querySelector('tbody'); if (tbody) { while (tbody.hasChildNodes()) { tbody.removeChild(tbody.lastChild); } } return table; }

 .as-console-wrapper { top: 0; max-height: 100% !important; } .hidden-table { display: none; }

 <table class="hidden-table"></table>

---

作为插件

您可以改为调用它：

let parser = new TableRowParser()
console.log(parser.parse(tableString, ['date', 'name', 'cost']))

 const 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> `; class TableRowParser { constructor(config) { this.options = Object.assign({}, TableRowParser.defaults, config) if (document.querySelector('.' + this.options.selector) == null) { let hiddenTable = document.createElement('table') hiddenTable.classList.add(this.options.selector) document.body.appendChild(hiddenTable) } this.tableRef = document.querySelector('.' + this.options.selector) } /* @public */ parse(dataString, fields) { this.__emptyTable() this.__populateTable(dataString) return Array.from(this.tableRef.querySelectorAll('tbody tr')).map(tr => { let tds = tr.querySelectorAll('td') return fields.reduce((obj, field, index) => { return Object.assign(obj, { [field] : tds[index].textContent }) }, {}); }); } /* @private */ __populateTable(dataString) { if (this.tableRef.querySelector('tbody') == null) { this.tableRef.appendChild(document.createElement('tbody')) } this.tableRef.querySelector('tbody').innerHTML = dataString } /* @private */ __emptyTable() { let tbody = this.tableRef.querySelector('tbody') if (tbody) { while (tbody.hasChildNodes()) { tbody.removeChild(tbody.lastChild) } } } } /* @static */ TableRowParser.defaults = { selector : 'hidden-table' } let parser = new TableRowParser() console.log(parser.parse(tableString, ['date', 'name', 'cost']))

 .as-console-wrapper { top: 0; max-height: 100% !important; } .hidden-table { display: none; }

Answer 4

我更喜欢使用X-ray npm-module 从html页面抓取数据。 例如：

const Xray = require('x-ray');
const x = Xray();

let html = `
    <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>
`;

x(html, 'tr', [['td']])
    .then(function(res) {
        console.log(res); // prints first result
    });

这会给你：

[ [ '01/01/1999', 'Item 1', '55' ], [ '01/01/2000', 'Item 2', '35' ] ]

所以下一步将迭代数组数组并用它形成一个必要的json ，所以我想根据这个问题它不会成为问题。

此外，您可以使用旧的table-to-json将面向表的站点直接转换为漂亮的 JSON。

Answer 5

将 html 标记作为 XML 读取，DOM 是 XML 。

let tableString = '  <record> '+
                            '  <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>'+
                        '  </record> ';


              let source = ( new DOMParser() ).parseFromString( tableString, "application/xml" );

                console.log(source);
                let size = source.childNodes[0].childNodes.length;
                for (let id =0; id< size;id++){
                    let tag = source.childNodes[0].childNodes[id];
                    if(tag.nodeName=='tr'){
                    let tagTr = tag.childNodes;
                        console.log(tagTr[1].textContent);
                        console.log(tagTr[2].textContent);
                        console.log(tagTr[3].textContent);
                    }

                }
                console.log(size);