JavaScript新手求助：如何从TXT/CSV读取数据并保留现有布局

我是JavaScript新手，这是我的第一个项目。我做了一个可通过客户ID或邮箱查询的搜索框，目前手动填充source文本域的数据就能正常运行。现在想知道：

1. 怎么从.txt或.csv文件读取数据？
2. 如何保留现有的数据布局（示例格式如下）：

{   IDCLIENT12345 email@gmail.com 20/09/2022  50EUR   AMAZON  <a href="https://127.0.0.1">lien</a>    }

以下是我当前的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style>*{font-family:arial;font-size:12px;}</style>
<script type="text/javascript">function ok_onclick(){n=document.getElementById("champ").value;i=0;if (n==0){re1="{1,6}";re2="*";} else {re1="{"+(n-1)+"}";re2="{"+(6-n)+"}";};t=document.getElementById("tout").value;s=document.getElementById("source").value;re=new RegExp("^\\{\t(([^}\t]*\t)"+re1+"[^}\t]*" + t + "[^}\t]*(\t[^}\t]*)"+re2+")\t\\}$","gmi");html="";while (match = re.exec(s)) { i++; html=html+"<tr><td>"+match[1].replace(/\t/g, "</td><td>")+"</td></tr>";} document.getElementById("res").innerHTML="<table border=1 cellpadding=4><tr><th>CIP</th><th>Mail</th><th>Date de virement</th><th>Montant</th><th>Vague</th><th>Lien facture</th></tr>"+html+"</table>";document.getElementById("total").value=i;}

</script>
</head>
<body>
<img src="XXX.jpg" height="64"/><br><br>
Recherche <input id="tout"> par <select id="champ"><option value="0">Tous les champs</option><option value="1">CIP</option><option value="2">Email</option></select> <button onclick="ok_onclick()" style="width:72px">OK</button>
<br><br>Shop trouvées : <input id="total" readonly size="5" style="border:none;"/><br>
<div id="res"></div>
<textarea id="source" style="visibility:hidden">


{   IDCLIENT123 email@gmail.com 20/09/2022  50EUR   AMAZON  <a href="https://127.0.0.1">lien</a>    }



</textarea>
</body>
</html>

一、从TXT/CSV读取数据的实现 #

前端可通过File API读取本地文件，无需后端服务，步骤如下：

• 添加文件选择控件，允许用户选择.txt或.csv文件；
• 使用FileReader读取文件内容；
• 根据文件类型处理内容，适配现有source的格式。

二、保留现有数据布局的处理 #

• TXT文件：确保文件内容与现有格式一致（每行一个{ ... }条目，字段用制表符分隔），读取后直接赋值给source文本域即可；
• CSV文件：将逗号分隔的字段转换为制表符分隔，再包裹{ }，匹配现有布局。

修改后的完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style>*{font-family:arial;font-size:12px;}</style>
<script type="text/javascript">
function ok_onclick(){
    n=document.getElementById("champ").value;
    i=0;
    if (n==0){
        re1="{1,6}";
        re2="*";
    } else {
        re1="{"+(n-1)+"}";
        re2="{"+(6-n)+"}";
    }
    t=document.getElementById("tout").value;
    s=document.getElementById("source").value;
    re=new RegExp("^\\{\t(([^}\t]*\t)"+re1+"[^}\t]*" + t + "[^}\t]*(\t[^}\t]*)"+re2+")\t\\}$","gmi");
    html="";
    while (match = re.exec(s)) { 
        i++; 
        html=html+"<tr><td>"+match[1].replace(/\t/g, "</td><td>")+"</td></tr>";
    } 
    document.getElementById("res").innerHTML="<table border=1 cellpadding=4><tr><th>CIP</th><th>Mail</th><th>Date de virement</th><th>Montant</th><th>Vague</th><th>Lien facture</th></tr>"+html+"</table>";
    document.getElementById("total").value=i;
}

// 文件读取处理函数
function readFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        let content = e.target.result;
        const fileType = file.name.split('.').pop().toLowerCase();

        if (fileType === 'csv') {
            // 将CSV转换为现有格式：每行转成{ 字段1\t字段2\t... }
            content = content.split('\n').map(line => {
                if (!line.trim()) return '';
                // 替换逗号为制表符，若字段包含带引号的逗号，需补充逻辑处理
                const fields = line.split(',').map(field => field.trim()).join('\t');
                return `{   ${fields}    }`;
            }).join('\n');
        }
        // 填充到source文本域
        document.getElementById('source').value = content;
        // 自动执行查询（可根据需求移除）
        ok_onclick();
    };
    reader.readAsText(file);
}
</script>
</head>
<body>
<img src="XXX.jpg" height="64"/><br><br>
<!-- 添加文件选择控件 -->
选择数据文件：<input type="file" accept=".txt,.csv" onchange="readFile(event)"><br><br>

Recherche <input id="tout"> par <select id="champ"><option value="0">Tous les champs</option><option value="1">CIP</option><option value="2">Email</option></select> <button onclick="ok_onclick()" style="width:72px">OK</button>
<br><br>Shop trouvées : <input id="total" readonly size="5" style="border:none;"/><br>
<div id="res"></div>
<textarea id="source" style="visibility:hidden"></textarea>
</body>
</html>

补充说明 #

1. TXT文件要求：文件内容需与现有格式完全匹配，每行一个{ ... }条目，字段间用制表符分隔（你的正则逻辑依赖制表符匹配字段）；
2. CSV文件扩展：代码中做了简化处理，若CSV字段包含带引号的逗号（如"Dupont, Jean"），需要添加CSV解析逻辑处理这种情况；
3. 自动查询逻辑可按需移除，改为让用户手动点击OK按钮执行搜索。

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