將 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);