如何用JavaScript在HTML中搜索本地CSV/TXT文件并展示匹配内容

我来帮你完善这个功能！要实现读取本地CSV/TXT文件并根据输入的代码展示对应文本，咱们需要先解决几个关键点：让用户能选择本地文件、解析文件内容、实现搜索匹配逻辑。下面是修正并补充完整的代码：

完整代码 #

<html>
<head>
    <meta charset="UTF-8">
</head>
<body onload="form1.reset();">
    <form id="form1">
        <fieldset>
            <label for="file">选择本地CSV/TXT文件:</label>
            <input type="file" id="file" accept=".csv,.txt" required><br><br>
            
            <label for="code">Code:</label>
            <input type="text" id="code" maxlength="6" required>
            
            <p id="output">Text will be shown here!</p>
            
            <input type="button" id="button" value="Ok">
        </fieldset>
    </form>

    <script>
        // 存储解析后的键值对数据
        let dataMap = {};

        // 监听文件选择事件，读取并解析文件内容
        document.getElementById('file').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                const content = event.target.result;
                // 按分号分割内容
                const items = content.split(';');
                // 遍历生成键值对（奇数位为键，偶数位为值）
                for (let i = 0; i < items.length; i += 2) {
                    if (items[i] && items[i+1]) {
                        dataMap[items[i].trim()] = items[i+1].trim();
                    }
                }
                alert('文件解析完成，可以开始搜索啦！');
            };
            reader.readAsText(file);
        });

        // 按钮点击事件：搜索并展示对应文本
        document.getElementById('button').onclick = function() {
            const inputCode = document.getElementById('code').value.trim();
            const outputElement = document.getElementById('output');
            
            if (!inputCode) {
                outputElement.innerHTML = '请输入有效的Code！';
                return;
            }

            // 查找对应值
            const matchedText = dataMap[inputCode];
            if (matchedText) {
                outputElement.innerHTML = `匹配到的文本：<strong>${matchedText}</strong>`;
            } else {
                outputElement.innerHTML = `没有找到Code为"${inputCode}"的对应文本！`;
            }
        };
    </script>
</body>
</html>

关键功能说明 #

• 文件选择控件：新增了input type="file"，并限制只接受.csv和.txt文件，用户必须先选择文件才能进行搜索
• 文件读取逻辑：使用浏览器的FileReader API读取文件内容，这是浏览器安全策略允许的本地文件读取方式（必须由用户主动触发选择）
• 数据解析：将CSV内容按分号分割后，把奇数位置的内容作为键（比如示例中的1、2、3），偶数位置的内容作为对应的值（比如a bc、def、gh i），存储到dataMap对象中
• 搜索匹配：点击按钮时，获取输入的Code，从dataMap中查找对应值，然后更新展示区域的内容

注意事项 #

• 浏览器的安全限制：无法直接通过文件路径（比如file.csv）读取本地文件，必须由用户手动选择文件才能触发读取
• 确保你的CSV/TXT文件格式和示例一致：内容用分号分隔，键和值交替出现（比如1;a bc;2;def;3;gh i）

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