如何将PHP读取的HTML内容与前端JSON转换代码结合生成JSON数组？

我来帮你把这两部分代码结合起来，实现把PHP读取的HTML表格转换成JSON数组的需求。咱们分步骤来梳理：

1. 后端PHP：读取HTML并传递给前端（或直接生成JSON） #

你的PHP代码已经能成功提取HTML文件的body内容，我们可以在此基础上优化，同时提供两种思路：前端处理转JSON和后端直接生成JSON，你可以根据需求选择。

思路1：PHP输出HTML，由前端处理转JSON #

修改PHP代码，把读取到的HTML嵌入到页面中，同时添加错误处理避免HTML不规范导致的警告：

<?php
// 禁用DOMDocument的HTML规范警告
libxml_use_internal_errors(true);
$d = new DOMDocument; 
$mock = new DOMDocument; 
$d->loadHTML(file_get_contents('hydrocarbon2.htm')); 
libxml_clear_errors(); // 清除错误信息

$body = $d->getElementsByTagName('body')->item(0); 
foreach ($body->childNodes as $child){ 
    $mock->appendChild($mock->importNode($child, true)); 
} 
$htmlcode = $mock->saveHTML(); 
?>

思路2：PHP直接解析表格生成JSON（更高效） #

如果不需要前端参与，可以直接在PHP里解析表格并输出JSON，省去前端处理步骤：

<?php
libxml_use_internal_errors(true);
$d = new DOMDocument;
$d->loadHTML(file_get_contents('hydrocarbon2.htm'));
$xpath = new DOMXPath($d);

// 提取表头文本
$headers = [];
foreach ($xpath->query('//table/thead/tr/th') as $th) {
    $headers[] = trim($th->nodeValue);
}

// 提取表格行数据
$rows = [];
foreach ($xpath->query('//table/tbody/tr') as $tr) {
    $row = [];
    $cells = $xpath->query('./td', $tr);
    foreach ($cells as $index => $td) {
        // 处理列数不匹配的情况
        if (isset($headers[$index])) {
            $row[$headers[$index]] = trim($td->nodeValue);
        } else {
            $row['extra_col_' . ($index + 1)] = trim($td->nodeValue);
        }
    }
    $rows[] = $row;
}

// 输出JSON格式结果
header('Content-Type: application/json');
echo json_encode(['myrows' => $rows]);
?>

2. 前端JavaScript：结合PHP输出的HTML转JSON #

如果选择思路1，我们需要把前端代码和PHP输出的HTML整合，同时处理表格列数不匹配的问题：

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格转JSON</title>
</head>
<body>
    <?php echo $htmlcode; // 输出PHP读取到的HTML表格 ?>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        var myRows = []; 
        var $headers = $("th"); 

        $("tbody tr").each(function() { 
            var rowData = {};
            $(this).find("td").each(function(cellIndex) {
                // 避免列数不匹配导致的undefined键
                if ($headers[cellIndex]) {
                    // 用text()获取纯文本表头，trim去除多余空格
                    var headerKey = $($headers[cellIndex]).text().trim();
                    rowData[headerKey] = $(this).html();
                } else {
                    rowData['extra_column_' + (cellIndex + 1)] = $(this).html();
                }
            });
            myRows.push(rowData);
        }); 

        var myObj = { myrows: myRows }; 
        console.log('转换后的JSON:', JSON.stringify(myObj));
        
        // 可选：如果需要把JSON发送回后端保存，添加AJAX代码
        // $.post('save_json.php', { data: JSON.stringify(myObj) }, function(res) {
        //     alert('JSON数据已保存');
        // });
    });
    </script>
</body>
</html>

关键注意点 #

• HTML规范问题：添加libxml_use_internal_errors(true)可以避免DOMDocument因HTML不规范抛出警告。
• 列数不匹配：你的表格存在部分行列数与表头不一致的情况，代码中添加了额外列的处理逻辑，避免出现无效键。
• 数据准确性：用trim()处理文本内容，去除多余的空格和换行符，保证JSON数据的整洁。

内容的提问来源于stack exchange，提问作者user2828442