如何在本地HTML中读取本地文本文件并转换为JavaScript二维数组？

嘿，看起来你已经搞定了本地文件读取的基础部分，现在就差把读取到的文本转成目标格式的二维数组了对吧？我来给你一步步拆解实现方法：

核心转换思路 #

假设你的源文本是每行一组用逗号分隔的数值（比如每行是0,619804,7,128这样，和目标数组的每行对应），我们只需要在读取文本后做几个简单的字符串处理：

• 分割文本行：兼容Windows/Unix的换行符，把文本拆成每行内容，同时过滤空行
• 转换每行数据：把每行按逗号分割，清理掉数值周围的空格，转成数字类型
• 组装二维数组：将处理后的每行数据收集成最终的二维数组dataset

完整修改后的代码 #

直接替换你原来的HTML代码就行，我已经把转换逻辑整合进去了：

<html>
<head>
<script>
window.onload = function () { 
    document.getElementById('myfile').onchange = readFile; 
};

function readFile() { 
    const file = this.files[0]; 
    const fReader = new FileReader(); 
    fReader.onload = function (event) { 
        const rawText = event.target.result;
        // 1. 按换行分割文本，过滤空行（兼容不同系统的换行符）
        const lines = rawText.split(/\r?\n/).filter(line => line.trim() !== '');
        // 2. 处理每一行，转成数字数组
        const dataset = lines.map(line => {
            // 分割每行的逗号，清理空格后转成数字
            return line.split(',').map(item => {
                const num = parseFloat(item.trim());
                // 如果是整数就转成int，非整数保留浮点，根据需求调整
                return Number.isInteger(num) ? parseInt(num) : num;
            });
        });
        // 把格式化后的数组显示到textarea
        document.getElementById('fileContent').value = JSON.stringify(dataset, null, 2);
        // 将dataset设为全局变量，方便后续使用
        window.dataset = dataset;
        // 控制台打印结果，方便调试
        console.log('转换完成的二维数组：', dataset);
    }; 
    fReader.readAsText(file); 
}
</script>
</head>
<body>
<p>
<input id="myfile" type="file" /></p>
<textarea id="fileContent" cols="68" rows="10" ></textarea>
</body>
</html>

关键细节说明 #

• 用split(/\r?\n/)兼容Windows的\r\n和Unix的\n换行符，避免出现分割错误
• filter(line => line.trim() !== '')可以去掉文本末尾的空行或者无效的空内容，防止生成空数组元素
• item.trim()处理数值周围的空格，比如文本里是0 , 619804 , 7这种带空格的情况也能正确转换
• JSON.stringify(dataset, null, 2)会把数组转成带缩进的格式化字符串，和你给出的示例格式几乎一致，看起来更直观

如果你的源文本用的是其他分隔符（比如空格、制表符），只需要把split(',')改成对应的分隔符即可，比如用split(/\s+/)处理空格分隔的内容。

内容的提问来源于stack exchange，提问作者破嘎獸