如何用纯JavaScript和HTML5实现问答文件的读取与转换下载

嘿，别发愁！完全用纯HTML5和原生JavaScript就能搞定你要的这两个功能，我给你一步步拆解实现思路，附上完整的可运行代码，你跟着来就行～

先把你写的开头补全，添加需要的交互元素：单个问题的输入区、结果展示区，还有批量文件处理的上传控件和下载按钮，顺便加了点基础样式让页面不那么简陋：

<!DOCTYPE html>
<html>
<head>
    <title>Random Facts</title>
    <style>
        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        input, button, textarea {
            margin: 5px 0;
            padding: 8px;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
        }
        #singleResult, #fileStatus {
            margin-top: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>单个问题解答</h2>
        <input type="text" id="singleQuestion" placeholder="输入你的问题，比如What should I eat">
        <button onclick="handleSingleQuestion()">获取答案</button>
        <div id="singleResult"></div>
    </div>

    <div class="section">
        <h2>批量问题处理</h2>
        <input type="file" id="fileInput" accept=".txt">
        <button id="downloadBtn" disabled>下载处理后的文件</button>
        <div id="fileStatus"></div>
    </div>

    <script>
        // 后面的JS逻辑都写在这里
    </script>
</body>
</html>

这个逻辑很简单：获取输入框的内容，按照你要的规则转换格式，然后展示结果。我写了个示例转换逻辑，你可以根据实际需求调整答案生成规则：

// 单个问题处理函数
function handleSingleQuestion() {
    const input = document.getElementById('singleQuestion');
    const resultDiv = document.getElementById('singleResult');
    const question = input.value.trim();

    if (!question) {
        resultDiv.textContent = "请输入有效的问题哦！";
        return;
    }

    // 核心转换：把"What should I [动作]"改成"What to [动作]: [答案]"
    // 这里用正则匹配替换，你可以根据实际问题句式调整正则
    const transformedQuestion = question.replace(/What should I (\w+)/i, 'What to $1');
    // 示例答案池，你可以换成固定答案或自己的生成逻辑
    const answers = ["Tacos", "Pizza", "Salad", "Burger", "Sushi"];
    const randomAnswer = answers[Math.floor(Math.random() * answers.length)];
    const finalResult = `${transformedQuestion}: ${randomAnswer}`;

    resultDiv.textContent = finalResult;
    input.value = ""; // 清空输入框
}

这部分要用到HTML5的File API读取文件，再用Blob对象生成可下载的文件。逻辑是：监听文件上传→读取txt每一行→逐行处理→生成新txt文件供下载：

// 批量文件处理相关变量
let processedContent = "";
const fileInput = document.getElementById('fileInput');
const downloadBtn = document.getElementById('downloadBtn');
const fileStatus = document.getElementById('fileStatus');

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    // 验证是否为txt文件
    if (file.type !== 'text/plain' && !file.name.endsWith('.txt')) {
        fileStatus.textContent = "请上传.txt格式的文件！";
        downloadBtn.disabled = true;
        return;
    }

    // 使用FileReader读取文件内容
    const reader = new FileReader();
    reader.onload = function(event) {
        const content = event.target.result;
        // 兼容不同系统的换行符，分割成每行
        const lines = content.split(/\r?\n/);
        processedContent = "";
        let validLineCount = 0;

        // 逐行处理每个问题
        lines.forEach(line => {
            const trimmedLine = line.trim();
            if (trimmedLine) { // 跳过空行
                validLineCount++;
                // 复用单个问题的转换逻辑
                const transformed = trimmedLine.replace(/What should I (\w+)/i, 'What to $1');
                const answers = ["Tacos", "Pizza", "Salad", "Burger", "Sushi"];
                const randomAnswer = answers[Math.floor(Math.random() * answers.length)];
                processedContent += `${transformed}: ${randomAnswer}\n`;
            }
        });

        fileStatus.textContent = `文件处理完成！共处理了${validLineCount}个有效问题`;
        downloadBtn.disabled = false;
    };

    reader.onerror = function() {
        fileStatus.textContent = "文件读取失败，请重试！";
        downloadBtn.disabled = true;
    };

    reader.readAsText(file);
});

// 下载处理后的文件
downloadBtn.addEventListener('click', function() {
    if (!processedContent) return;

    // 创建Blob对象存储处理后的内容
    const blob = new Blob([processedContent], { type: 'text/plain' });
    // 生成临时下载链接
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'processed_questions.txt'; // 自定义下载文件名
    a.click();
    // 释放临时URL，避免内存泄漏
    URL.revokeObjectURL(url);
});

一些可自定义的点 #

• 转换规则：如果你的问题句式不止一种，比如还有"What can I do"这类，只需要修改正则表达式和替换逻辑就行。
• 答案生成：示例用了随机答案池，你可以换成固定答案，甚至如果需要调用外部API（纯前端要注意跨域问题）也能改。
• 样式：你可以根据自己的喜好调整CSS，让页面更美观。

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