如何用JavaScript实现上传CSV文件转表格的搜索栏功能？

问题说明 #

已完成CSV文件上传和表格渲染的基础功能，需要实现搜索栏检索表格内容的功能。

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV表格搜索工具</title>
    <script src="./app.js"></script>
    <style>
        table {
            border-collapse: collapse;
            margin-top: 1rem;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        #search {
            padding: 8px;
            margin-right: 1rem;
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="text" name="search" id="search" placeholder="输入内容搜索">
    <input type="file" accept=".csv" id="picker">
    <table id="table"></table>
</body>
</html>

JavaScript代码

window.onload = () => {
    const picker = document.getElementById("picker");
    const table = document.getElementById("table");
    const searchInput = document.getElementById("search");
    let csvData = []; // 存储解析后的CSV数据

    // 处理文件上传
    picker.onchange = () => {
        const reader = new FileReader();
        reader.readAsText(picker.files[0]);
        reader.onloadend = () => {
            csvData = parseCSV(reader.result);
            renderTable(csvData);
        };
    };

    // 实时搜索监听
    searchInput.addEventListener("input", () => {
        const searchTerm = searchInput.value.trim().toLowerCase();
        if (!csvData.length) return;

        // 过滤包含搜索词的行（不区分大小写）
        const filtered = csvData.filter(row => 
            row.some(col => col.toLowerCase().includes(searchTerm))
        );

        renderTable(filtered);
    });

    // 解析CSV，处理带引号的字段
    function parseCSV(csv) {
        const rows = csv.split("\r\n").filter(row => row.trim());
        const parsed = [];
        for (const row of rows) {
            const cols = row.match(/(?:\"([^\"]*(?:\"\"[^\"]*)*)\")|([^\",]+)/g);
            if (cols) {
                parsed.push(cols.map(col => {
                    if (col.startsWith('"') && col.endsWith('"')) {
                        return col.slice(1, -1).replace(/""/g, '"');
                    }
                    return col;
                }));
            }
        }
        return parsed;
    }

    // 渲染表格内容
    function renderTable(data) {
        table.innerHTML = "";
        if (!data.length) return;

        // 创建表头
        const headerRow = table.insertRow();
        data[0].forEach(header => {
            const th = document.createElement("th");
            th.textContent = header;
            headerRow.appendChild(th);
        });

        // 创建数据行
        for (let i = 1; i < data.length; i++) {
            const tr = table.insertRow();
            data[i].forEach(col => {
                const td = tr.insertCell();
                td.textContent = col;
            });
        }
    }
};

关键改进点 #

• 新增csvData变量存储解析后的完整数据，避免重复读取文件
• 拆分出parseCSV和renderTable工具函数，让代码更清晰易维护
• 搜索逻辑支持不区分大小写的全表检索，也可修改为仅搜索指定列（比如只搜第一列：将row.some改为row[0].toLowerCase().includes(searchTerm)）
• 修复了原代码中CSV字段的引号处理问题，转义的双引号会被正确还原
• 添加基础样式，让表格更易读

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